自动调整网站内嵌Youtube视频大小

实用教程 admin 1个月前 (10-23) 107次浏览 0个评论

站长在制作网站的时候,常常会需要嵌入Youtube影片,现在移动设备盛行,有各种不同屏幕大小的移动设备来浏览网站,若在网站上要内嵌入Youtube视频,该如何让该影片可以根据浏览设备的屏幕大小自动调整影片嵌入大小呢?

在请Google一番之后,答案出乎意料的简单。以下是搜索出来的解决方案:

首先先把下列CSS网站的CSS文件里:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

接着把Youtube视频的iframe代码在div里面,并且把这个div的类设成video-container,以下为范例:

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2KmHtgtEZ1s" frameborder="0" allowfullscreen></iframe>
</div>

如此一来就内嵌的视频大小就会自动根据屏幕宽度调整了!

 


VPS小白 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址