html - 视频填充问题

Question

大家好，我现在遇到了一个问题。

我这里有这个页面:http://goo.gl/V0352s

现在我的 youtube 视频被切断了(它甚至没有反应)，我试图弄清楚可能是什么问题以及如何使用 CSS 解决它。我有 ff: HTML:

    <div style="width: 46%; float:left;height: 299px;">
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/h8NChiwfkFs?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
    </div>

<div style="float: right; width: 46%">
<h5>Description:</h5>
<p>Promotional Video for iLiveAccountable. A local life coaching and training company. Owned by Tony Beatty and Michael Gardner.</p>
<h5>Company</h5>
<p>iLiveAccountable</p>
<h5>Project Link</h5>
<p><a href="https://goo.gl/JZ0Hfw" target="_blank">https://goo.gl/JZ0Hfw</a>
</p></div>

您可以尝试在 Chrome 上右击 inspect element 来实时查看。

提前感谢您的帮助!

Answer 1

添加此 CSS:

@media (min-width: 768px) {
    .postid-146 iframe {
        height: 31.5vw;
        max-height: 315px;
    }
}

<罢工>

在多次尝试以响应方式使这项工作失败后，我制作了一个脚本，根据其集合 width 调整 iframe 的大小。和 height属性，以及实际的 width :

jQuery(document).ready(function($) {
  $(window).on('load resize', function() {
    $('iframe').each(function() {
      $(this).css({
        'height': ($(this).attr('height') * $(this).width() / $(this).attr('width')) + 'px'
      });
    })
  });
});