Youtube内嵌视频不能自适应的解决办法

youtube内嵌视频不能自适应怎么办？

目录

• 答案
• 文章目录
• Youtube内嵌视频不能自适应的解决办法详细回答

Youtube内嵌视频不能自适应的解决办法详细回答

在做独立站的过程中，市场上SAAS模式建站是不允许上传较大视频或干脆不允许上传视频。将网站自建者的服务器带宽一般不大，将服务器上的视频资源放在服务器上会占用大量的带宽，影响整个网站的开放速度。但是在当前短视频风靡的时代，在网站上添加一个产品或者一个评价视频的视频，都可以帮助提高转化率。

世界上最大的视频网站youtube对于存放视频特别合适，便于分享传播，也可以给网站带来流量，快速打开的同时还免费。

怎么把youtube视频嵌入独立站点？

youtube内嵌视频不能自适应怎么办？

1、尚未上载视频的youtube网站请点击左上角的三个横杆-->选择您的视频-->点击右上角的“创建”以上传视频-->然后打开视频播放界面，点击共享-->嵌入-->复制代码。

2、打开商品详细页面等独立站所要嵌入位置的编辑器，在打开编辑器后，点击HTML切换到编码模式-->粘贴刚刚复制的代码，然后再按下html切换回视图模式，查看youtube的视频。

3、提交后在pc端的作用。

移动终端(移动端)：我们能够看到的视频只有一半，而另一半没有，这种情况可以通过嵌入代码来解决。

4、在youtube代码之外添加一个div模块，以根据代码对pc端和手机端进行定制。

附有代码：

<div class="video-box">  <iframe width="560" height="315" src="https://www.youtube.com/embed/ZNziUUhjmvI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">  </iframe></div><style type="text/css">.video-box{    position: relative;    width: 100%;    height: 0;    padding-bottom: 56.25%;}.video-box iframe{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}@media screen and (max-width:800px){  .video-box{        width:100%;  }}</style>