使視頻寬高比保持最大100％寬度和高度

Question

我想要使用嵌入代碼將YouTube視頻集成到「彈出式窗口」中。

我的問題是，視頻不會限制其父母的高度。我希望它不會高於包含視頻的div＃彈出窗口。現在它會盡可能地寬，並保持高寬比，即使它放棄了父母的身高。我想要的是視頻在父母填充或邊距內儘可能大，保持居中並保持其縱橫比（16：9）。

我不想使用jQuery，javascript可能是一個選項。

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#pop-up{ 
 
    width:100%; 
 
    height:100vh; 
 
    padding:5%; 
 
    box-sizing: border-box; 
 
    background:rgba(0,0,0,0.2); 
 
}

<div id="pop-up"> 
 
    <!--Youtube embed code--> 
 
    <div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div> 
 
</div>

這裏是什麼，我想visualy一個例子：

憑藉廣泛的瀏覽器就像一臺計算機或景觀電話：

有了這樣一個人像一個高大的瀏覽器手機或平板電腦：

Answer 1

所以這裏的解決方案是使用媒體查詢來監控窗口的縱橫比，因爲我的彈出窗口涵蓋了整個窗口ws大小在首位。然後，我必須使用具有100％高度的正確縱橫比（16px x 9px）的圖像來利用瀏覽器必須保持圖像寬度與其高度的正確比例。使用內聯塊來捕獲圖像大小和位置絕對頂部0右0底部0左0技巧將父級的大小應用於視頻容器。

這一切都工作正常寬度自動刷新其子元素的大小或調整窗口的大小，所以我用了一個簡單的JavaScript行簡單地刪除並重新應用寬度自動完成後大小調整。

我已經放棄了中心視頻的想法，我將改爲使用剩下的空間來應用更多的內容。

var rtime; 
 
var timeout = false; 
 
var delta = 200; 
 
window.onresize = function(){ 
 
    rtime = new Date(); 
 
    if (timeout === false) { 
 
     timeout = true; 
 
     setTimeout(resizeend, delta); 
 
    } 
 
}; 
 

 
function resizeend() { 
 
    if (new Date() - rtime < delta) { 
 
     setTimeout(resizeend, delta); 
 
    } else { 
 
     timeout = false; 
 
     if(window.innerWidth/window.innerHeight>16/10){ 
 
      document.getElementById("videoWrapper").style.width="0"; 
 
      setTimeout(function(){ 
 
      document.getElementById("videoWrapper").style.width="auto"; 
 
      },100) 
 
     } 
 
    }    
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#pop-up { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 5%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    position: absolute; 
 
} 
 
#videoWrapper { 
 
    width:100%; 
 
    position:relative; 
 
    height:0; 
 
    padding-bottom:56.25%; 
 
    width:100%; 
 
} 
 
@media all and (min-aspect-ratio: 16/10) { 
 
    #videoWrapper { 
 
    height:100%; 
 
    position:relative; 
 
    padding-bottom:0; 
 
    display:inline-block; 
 
    width:auto; 
 
    } 
 
    #videoWrapper img{ 
 
    height:100%; 
 
    } 
 
}

<div id="pop-up"> 
 
    <div id="videoWrapper"> 
 
    <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" frameborder="0" allowfullscreen style="position:absolute;width:100%;height:100%;left:0"></iframe> 
 
    <img src="http://jaunemoutarde.ca/denique/4/images/16x9_aspect_ratio.png" alt="" /> 
 
    </div> 
 
</div>

Answer 2

I對你的造型做了一些改變。

看看這是否適合你。

正如你可以看到下面，如果這就是你要的方式：

@media (max-width: 1024px) { 
 
    body #pop-up iframe { 
 
    max-height: 34.6vh; 
 
    } 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#pop-up { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 5%; 
 
    box-sizing: border-box; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#pop-up iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 1024px; 
 
    max-height: 576px; 
 
}

<div id="pop-up"> 
 
    <iframe src="https://www.youtube.com/embed/ZLtNZuQzJ4w?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe> 
 
</div>