ビデオの周りに画像を巻き込む（応答する）

Question

私はラップトップの画像を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>

Answer 1

あなたは可変幅を使用する#tv_containerスタイルを変更する必要があります。

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

を、その幅に応じて変化するので、私はまた、コンテナのauto高さを使用。