Youtube 视频 100% 宽度和自定义高度答案

【问题标题】：Youtube video 100% width and custom heightYoutube 视频 100% 宽度和自定义高度
【发布时间】：2017-01-20 18:45:22
【问题描述】：

我想在我的网站上添加一个宽度为 100%、高度为 400 像素的视频；我尝试了以下方法：

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 400px;
}

<div class="container">
  <iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen">
  </iframe>
</div>

但我的视频结果是这样的： click me pls

内部不是 100%。

有人知道如何解决这个问题吗？我会很感激的。

谢谢，

凯文

【问题讨论】：

如果增加 iframe 的宽度和高度会怎样？
我需要它是 400px 的高度，这不应该是可能的吗？

标签： html css iframe youtube

【解决方案1】：

// By Chris Coyier & tweaked by Mathias Bynens

$(function() {

	// 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
	// (You'll probably want to debounce this)
	$(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();

});

&lt;iframe width="1280" height="750" src="//www.youtube.com/embed/yCOY82UdFrw?rel=0&amp;amp;hd=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;

【讨论】：

有一个错误，我看不到它是否真的有效。

【解决方案2】：

请记住，百分比宽度或高度必须具有明确声明某种尺寸的父元素。在这种情况下是：

html, body {width:100%; height:100%;}。

对于高度，你仍然可以灵活地拥有你的 400px by：

height: auto;
min-height: 400px;

片段

html,
body {
  height: 100%;
  width: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto;
  min-height: 400px;
  overflow: hidden;
}

<div class="container">
  <iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" allowfullscreen="allowfullscreen">
  </iframe>
</div>

【讨论】：

预览显示了我想要的视频。当我玩它时，里面变小了。

【解决方案3】：

只需替换这行代码

<iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

用这个：

<iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" width="1200" height="720" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

然后告诉我会发生什么？

【讨论】：

和以前一样

【解决方案4】：

只需为 iframe 添加宽度和高度属性。请看样例：

<iframe src="https://www.youtube.com/embed/yourVideo" width="100%" height="500px"></iframe>

【讨论】：