youtube 视频没有正确调整大小答案

【问题标题】：youtube video not resizing properlyyoutube 视频没有正确调整大小
【发布时间】：2015-06-05 12:24:43
【问题描述】：

您好，我有一个背景 youtube 视频。我需要它来响应。随着我减小屏幕宽度，它变得更薄，这很好，但高度没有正确改变 - 它看起来有点像它缩小得太快了......你可以在这里看到它http://www.onscreencounselling.com/

请问有什么问题

<?php if(is_page('homepage')){ ?>
<div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">
            <iframe id="video_background_video_0_yt" style="position: absolute; top: -179px; left: 0px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1349" height="759" src="https://www.youtube.com/embed/1CXFhQ33_xs?loop=0&amp;start=0&amp;autoplay=1&amp;controls=1&amp;showinfo=0&amp;wmode=transparent&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.onscreencounselling.com"></iframe></div>

        <?php } ?>

还有这个css

#video_background_video_0 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【问题讨论】：

嘿@maxelcat 尝试只制作 height:100% 而不是 height:0;在#video_background_video_0。它会解决你的问题。

标签： html css youtube

【解决方案1】：

您是否将其直接添加到编辑器中？这是一个CSS修复。

 .page iframe {
  width: 560px !important;
  height: 315px !important;
  }

【讨论】：

【解决方案2】：

从您的 iframe 中删除内联样式，它会起作用：https://jsfiddle.net/ilpo/65sL59v8/

【讨论】：

【解决方案3】：

从iframe 中删除内联top 值 FIDDLE

【讨论】：

【解决方案4】：

从两者中删除内联样式并添加

overflow-hidden;

到 div ，它会工作。

【讨论】：