youtube 반응형 플레이어

<style>
#areau{
  position: relative; /* absolute는 부모가 relative일 때 부모를 따라간다. */
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
}

#video {
  position: absolute;
  width: 100%; /* 부모에 맞게 꽉 채운다. */
  height: 100%;
}
</style>
<div id="areau"><iframe id="video" src="https://www.youtube.com/embed/HtRz0mE_t8Q?playlist=HtRz0mE_t8Q&autoplay=1&mute=0&controls=1&loop=1&fmt=22" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

 

결과