響應式YouTube視頻嵌入
如何在您的網站上嵌入YouTube視頻並使其具有響應式，在移動設備上能適應縮小顯示。
嵌入YouTube視頻的問題在於它們是iframe，並且iframe需要給定確切的高度和寬度，否則它們將顯示不正常。
而且，我們需要保持按比例，根據視頻的寬高比。
要在您的頁面中顯示一個響應式的YouTube視頻，首先將它包裝到一個容器div中：
1
2
3
| <div class="video-container">
<iframe src="https://www.youtube.com/embed/...." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
|
然後在您的網站中添加以下CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
|
看到那個魔法數字，56.25%了嗎？這是當視頻的寬高比是16:9時需要的填充比例。（9是16的56.25%）
如果您的視頻是4:3的，請將其設置為75%。