中心，作物，適合視頻背景（iframe中）到下列的裝飾元素的父元素

Question

：

<div class="viewport"> 
    <iframe src="youtube.com/blabla"></iframe> 
</div> 

下面CSS：

.viewport { 
    height: 100vh; 
    width: 100%; 
} 

iframe { 
    position: absolute; 
} 

並給予下述事實：

• 在iframe中播放的視頻的縱橫比將爲16：9

是否可以編寫一個腳本，將iframe擴展爲大於父級的尺寸，以便iframe溢出，隱藏黑條？（是的，我知道它還將視頻的作物部位，但沒關係）

這裏有兩個例子，該腳本必須解決：

在第一個圖像，黑色條形在左邊和右邊。爲了解決這個問題，該腳本會將iframe拉伸得越來越高，從而將內部視頻拉伸，直到黑條消失。我們會失去視頻的頂部和底部，但沒關係。在第二張圖片中，黑條位於頂部和底部，我們需要將其拉伸並丟失視頻的兩側。

這是我註釋的嘗試，但不幸的是，代碼並沒有涵蓋所有的情況。一旦我的視口的縱橫比超過〜2.1，黑條就會回來。隨意廢棄我的腳本。

var block = $('.viewport'); 
    var block_h = block.outerHeight(); 
    var block_w = block.outerWidth(); 

    var ratio = block_w/block_h; 

    // If viewport is landscape (black bars on left/right) 
    if(ratio >= 1.77777778) { 
     var video_w = (block_h * 16)/9; // Get width of video within iframe 
     var total_black_bar_w = block_w - video_w; // Black bar total width 
     var new_iframe_w = (block_w + total_black_bar_w); // New width of the iframe needed to stretch the video wide enough to hide the black bars 
     var adjustment_percentage = new_iframe_w/block_w; // If we adjusted the width by 10% for example, then we also need to apply that percentage to the height 

     var new_iframe_h = (block_h * adjustment_percentage) + 30; 

     var pull_left = total_black_bar_w/2; // how far to pull left to center the iframe outside of the parent container 
     var pull_top = (new_iframe_h - block_h)/2; // same for top 
    } 
    // Portrait viewport (black bars on top/bottom) 
    else { 
     var video_h = (block_w * 9)/16; 
     var total_black_bar_h = block_h - video_h; 
     var new_iframe_h = (block_h + total_black_bar_h); 
     var adjustment_percentage = new_iframe_h/block_h; 

     var new_iframe_w = (block_w * adjustment_percentage) + 30; 

     var pull_left = total_black_bar_w/2; 
     var pull_top = (new_iframe_h - block_h)/2; 
    } 

    block.find('iframe').css({ 
     'width': new_iframe_w, 
     'height': new_iframe_h, 
     'left': '-' + pull_left + 'px', 
     'top': '-' + pull_top + 'px' 
    }); 

Answer 1

它實際上比您的代碼更簡單。

始終保持iframe的比例，但只是調整大小（實際比例）整個事情相應填充視口。

使用css定位/變換來居中它。

下面是一個較小的視口示例（帶紅色邊框），以便您可以看到它的實際應用。

jQuery(function($) { 
 
    var viewport = $('.viewport'), 
 
    frame = viewport.find('iframe'), 
 
    frameRatio = 16/9; 
 

 
    $(window).on('resize', function() { 
 
    var width = viewport.outerWidth(), 
 
     height = viewport.outerHeight(), 
 
     ratio = width/height, 
 
     targetWidth = width, 
 
     targetHeight = height; 
 

 
    if (ratio > frameRatio) { 
 
     // viewport is wider than video 
 
     // correct the height 
 
     targetHeight = width/frameRatio; 
 
    } else { 
 
     // viewport is taller than video 
 
     // correct the width 
 
     targetWidth = height * frameRatio; 
 
    } 
 

 
    frame.css({ 
 
     width: targetWidth, 
 
     height: targetHeight 
 
    }); 
 
    }).trigger('resize'); 
 
});

.viewport { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    position: relative; 
 
    border: 1px solid red; 
 
    margin: 10% 25%; 
 
} 
 

 
iframe { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="viewport"> 
 
    <iframe src="//www.youtube.com/embed/1La4QzGeaaQ?autoplay=1"></iframe> 
 
</div>

看到它http://jsfiddle.net/agrxtwn7/embedded/（去結果），因爲它似乎因此從打