嵌入式 youtube 视频上的奇怪高度问题答案

【问题标题】：Weird height issue on embedded youtube video嵌入式 youtube 视频上的奇怪高度问题
【发布时间】：2014-02-11 22:05:41
【问题描述】：

在此页面上，我有一个嵌入的 youtube 视频，该视频（最终）将位于一个宽度可变的容器中。当我在没有容器的情况下放入时，纵横比很好。当我将其放入容器中时，视频高度超出了正常的纵横比（参见屏幕截图）。

以下是相关代码：

.video-container {
    display: block;
    float: left;
    width: 74.05rem;
    margin-left: 1.1rem;
    margin-right: 1.1rem;
    margin-right: 0;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0; }

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

我这样做的时候参考了这篇文章，所以如果有更好的方法，请大声疾呼！ http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

仅供参考，目前位于http://www.idealbrandon.com/ksu2

【问题讨论】：

标签： html css video youtube

【解决方案1】：

我相信你所指的文章使用jQuery来达到你想要的效果。这是他们为 iframe 发布的脚本

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

【讨论】：

谢谢，但是 jQuery 技术只是一种后备技术。他们在我尝试使用的选项之上描述了一个仅 HTML/CSS 的选项。更具体地说，不管视频的流畅度如何，我最关心的是为什么它会吐出这么奇怪的高度。

【解决方案2】：

好的，所以在进行了一些挖掘和播放之后，我确定是填充黑客导致了问题。这意味着我只是在寻找不同的解决方案。

无论如何，感谢您查看此内容。

【讨论】：