Question

我试图让所有嵌入式视频都有响应，因为我找不到一个好的解决方案来使用bootstrap 3来响应视频。使用下面的代码我可以使任何视频响应。但我想将If条件添加到下面的代码中，这样如果调整窗口大小，代码仍可以完成工作。

我的jquery代码：

$(document).ready(function(){
	function show(){
		var containerWidth = $(".col-video").width();
		$('iframe').each(function(){ 
			var iframeWidth = $(this).attr("width");
			var iframeHeight = $(this).attr("height");
		    var flag = containerWidth / iframeWidth;
		    var newHeight = iframeHeight * flag;
			$(this).attr("width", "100%");
			$(this).attr("height", newHeight);
		});
		$('video').each(function(){ 
			var videoWidth = $(this).attr("width");
			var videoHeight = $(this).attr("height");
		    var flag = containerWidth / videoWidth;
		    var newHeight = videoHeight * flag;
			$(this).attr("width", "100%");
			$(this).attr("height", newHeight);
		});
	}
	show();
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-video">
          <h1>Hello World</h1>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/kIsscNG9Q54" frameborder="0" allowfullscreen></iframe>
          <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fskillinprogramming%2Fvideos%2F1356766841067995%2F&show_text=0&width=400" width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
          <video src="video.mp4" controls></video>
        </div>
      </div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="test.js"></script>
  </body>
</html>

Answer 1

您可以在窗口调整大小事件中运行代码，因为事件会不断触发，您可以使用去抖动功能，例如：

integer

演示：https://jsfiddle.net/kbyevc00/

Answer 2

在$(window).resize()内使用$(document).ready()。

决赛应该是：

$(document).ready(function () { 
 $(window).resize(function () {
  (function show() {
      var containerWidth = $(".col-video").width();
        $('iframe').each(function(){ 
            var iframeWidth = $(this).attr("width");
            var iframeHeight = $(this).attr("height");
            var flag = containerWidth / iframeWidth;
            var newHeight = iframeHeight * flag;
            $(this).attr("width", "100%");
            $(this).attr("height", newHeight);
        });
        $('video').each(function(){ 
            var videoWidth = $(this).attr("width");
            var videoHeight = $(this).attr("height");
            var flag = containerWidth / videoWidth;
            var newHeight = videoHeight * flag;
            $(this).attr("width", "100%");
            $(this).attr("height", newHeight);
        });
  })();

 )};
});

Answer 3

更有效的方法是在每个视频周围添加一个包装，然后添加height:0和padding-bottom:56.25%;以根据宽高比创建响应式div，然后将视频绝对定位在包装。填充底部可以是CSS中的任何百分比，因为JS无论如何都将在下一步调整。

然后在页面加载时，您可以计算每个视频百分比的纵横比，并将其应用于父包装的底部填充。

＆＃13;

$(document).ready(function(){
  $('iframe, video').each(function(){ 
    var iframeWidth = $(this).attr("width");
    var iframeHeight = $(this).attr("height");
    // calulate aspect ratio and convert to percentage
    var output = ((Math.round(iframeHeight) / Math.round(iframeWidth)) * 100).toFixed(2);
    // apply videos percentage based aspect radio to the padding bottom of the parent wrapper
    $(this).parent().css("padding-bottom", output + "%");
  });
});

＆＃13;

/* responsive div with 16:9 apsect ratio */
.videoWrapper {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   width: 100%;
   margin: 0 auto;
}
.videoWrapper video, .videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-6 col-video">
      <h1>Hello World</h1>
      <div class="videoWrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/kIsscNG9Q54" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="videoWrapper">
        <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fskillinprogramming%2Fvideos%2F1356766841067995%2F&show_text=0&width=400" width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
      </div>
      <div class="videoWrapper">
       <video src="video.mp4" controls></video>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何将条件添加到jquery中的$（window）.resize事件？

3 个答案: