html - 嵌入式youtube视频上的奇怪高度问题

在此页面上，我有一个嵌入式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

最佳答案

我相信您所指的文章使用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