如何將條件添加到$（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中的事件？

回答

相關問題