如何在您的網站上嵌入YouTube視頻並使其具有響應式,在移動設備上能適應縮小顯示。

嵌入YouTube視頻的問題在於它們是iframe,並且iframe需要給定確切的高度和寬度,否則它們將顯示不正常。

而且,我們需要保持按比例,根據視頻的寬高比。

要在您的頁面中顯示一個響應式的YouTube視頻,首先將它包裝到一個容器div中:

<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:

.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%。