<div class="container">
    <div class="item"></div>
  </div>

.container .item{
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

=============================   =============================

html

    <!-- YOUTUBE VIDEO -->
    <section class="youtube">
        <div class="youtube__area">
           <div id="player">

           </div>
        </div>
        <div class="youtube__cover"></div>
        <div class="inner">
          <img src="./images/floating1.png" alt="Icon" class="floating floating1">
          <img src="./images/floating2.png" alt="Icon" class="floating floating2">
          <img src="./images/floating3.png" alt="Icon" class="floating floating3">
        </div>
    </section>

css

/* YOUTUBE VIDEO */
.youtube{
    position: relative;
    height: 700px;
    background-color: #333;
    overflow: hidden;
}
.youtube .youtube__area{
    width: 1920px;
    background-color: orange;
    position: absolute;
    left: 50%;
    margin-left: calc(1920px / -2);
    top: 50%;
    margin-top: calc(1920px * 9 / 16 / -2);
}

.youtube .youtube__area::before{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top:56.25%
}
.youtube .youtube__cover{
    background-image: url("../images/video_cover_pattern.png");
    background-color: rgba(0,0,0,.3);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

#player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

js

https://developers.google.com/youtube/iframe_api_reference?hl=ko

      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: 'An6LvWQuj_8',//최초 재생할 유튜브 ID
          playerVars: {
            autoplay: true, //자동 재생 유무
            loop: true,//반복 재생 유무
            playlist:'An6LvWQuj_8'
          },
          events:{
            onReady: function(event) {
                event.target.mute(); //음소거
            }
          }
        });
      }




      onYouTubeIframeAPIReady();

소스 :https://github.com/braverokmc79/starbucks