标签： 自适应

站长在制作网站的时候，常常会需要嵌入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>

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