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

余米试图让所有嵌入的视频响应，因为我无法找到一个很好的解决方案，以使用引导3.使用下面的代码，我可以做任何响应视频的视频响应。但是我想将If条件添加到下面的代码中，以便如果窗口被调整大小，代码仍然可以完成这项工作。

我jQuery代码：

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

来源

2017-06-18 Debarshi Das

您可以在窗口中运行代码调整事件，因为事件触发汽车无你可以使用防抖功能，是这样的：

var myEfficientFn = debounce(function() { 
    show(); 
}, 250); 

$(window).on('resize', myEfficientFn); 

// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
};

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

来源

2017-06-18 16:44:00

使用$(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); 
     }); 
    })(); 

)}; 
});

来源

2017-06-18 17:02:55 gauravmuk

这样做会增加周围的每个视频的包装和添加height:0和padding-bottom:56.25%;基础上的高宽比，然后绝对创建一个响应格的更有效的方法将视频放置在包装中。填充底部可以是CSS中的任何百分比，因为无论如何JS会在下一步调整。

然后在页面加载就可以计算出每个视频百分比计算宽高比，并将其应用到父包装的底部填充。

$(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 + "%"); 
 
    }); 
 
});

/* 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%; 
 
}

<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>

来源

2017-06-18 17:29:40 WizardCoder

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

回答

相关问题