圍繞視頻環繞圖像（響應）

我想圍繞YouTube視頻包裝筆記本電腦圖像。我已經有了一個解決方案。現在我想讓所有的設備都能響應更小的設備。任何解決方案？圍繞視頻環繞圖像（響應）

body { 
 
    padding-top: 70px; 
 
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
 
} 
 
#tv_container { 
 
    background: url('img/video.jpg') no-repeat top left transparent; 
 
    width: 1440px; /* Adjust TV image width */ 
 
    height: 810px; /* Adjust TV image height */ 
 
    position: relative; 
 
} 
 
#tv_container iframe { 
 
    position: absolute; 
 

 
} 
 
.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
} 
 
.videoWrapper iframe { 
 
    position: relative; 
 
    top: 78px; 
 
    left: 252px; 
 
    width: 65%; 
 
    height: 67%; 
 
}

<div class="container"> 
 
    <div id="tv_container"> 
 
    <div class="videoWrapper"> 
 
     <iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-02-15 dindunuffin

使用'@ media'選擇器，而不是使用'px'，使用您希望具有響應的元素（在媒體選擇器內）'％'的百分比。 – Jer

，則應該更換#tv_container樣式使用可變寬度：

#tv_container { 
    background: url('img/video.jpg') no-repeat top left transparent; 
    width: 80%; 
    height: auto; 
    position: relative; 
}

我也用一個auto高度的容器，它根據其寬度變化。

來源

2017-02-15 09:31:10 Treeindev

圍繞視頻環繞圖像（響應）

回答

相關問題