반응형웹에서의 youtube영상

/*style.css*/

<style>
.video {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}


.video-container {
position: relative;
width: 100%;
height: auto;
padding-top: 50%;
margin:0 auto;
}

​

iframe {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 100%;margin:0 auto;
height: 100%;
}

</style>

 

​

​index.html

 

<div class="video">
<div class="video-container">
<!--youtube태그복사-->
<iframe width="100%" height="100%" src="유튜브링크" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>
</div>