视频填充问题

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元素来检查此实时。

提前感谢您的帮助！

Answer 1

添加此CSS：

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

<击>

在多次尝试使此工作失败后，我制作了一个脚本，根据其设置的width和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'
      });
    })
  });
});