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

Question

在这个页面上，我有一个嵌入的 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。

Answer 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