This gitst for shopify plartform. Make Dynamics youtube video section

settings_schema.json

  {
    "name": "Youtube",
    "settings":[    
      {
        "type": "header",
        "content": "Youtube Section"
      },
      {
        "type": "text",
        "id": "youtube_video_link",
        "label": "Youtube Link URL: ",
        "info" : " https://www.youtube.com/watch?v=dr7oP_5d52w "
      }
  ]
}

youtube-modify.css

#container-13243 {
    display: block;
    height: 105vh !important;
    position: static !important;
    transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    width: 100% !important;
}
@media (max-width: 767px) {
    #container-13243 {
        display: block;
        height: 400px !important;
        position: static !important;
        transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        width: 100% !important;
    }
}

youtube-modify.js

	function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}
var url = "{{settings.youtube_video_link}}";
var myId = getId(url);

var youtubeSrc = "https://www.youtube.com/embed/" + myId + "?autoplay=1&version=3&loop=1&controls=0&&playlist="+ myId +"&showinfo=0&fs=0&playsinline=1&modestbranding=1&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fmoksii.myshopify.com&widgetid=1";

var imageSrc = "https://img.youtube.com/vi/" + myId + "/maxresdefault.jpg";

// $('#player-13243').attr('src',youtubeSrc );
document.getElementById("player-13243").setAttribute('src',youtubeSrc);
document.getElementById("image-13243").setAttribute('src',imageSrc);

// $('#image-13243').attr('src',imageSrc );

// console.log("video url: " + url );

youtube-modify.liquid

  <div id="container-13243" class="cbb-video-bg-container mh-raihan" style="position: relative; pointer-events: all; padding: 0px; margin: 0px; max-width: initial; overflow: hidden; border-radius: 0px; opacity: 1; width: 1904px; height: 120px; top: 800px; left: 0px;">  
     <iframe id="player-13243" class="cbb-video-bg-player" style="position: absolute; width: 1904px; height: 1071px; left: 0px; top: -136px; max-width: initial;" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/dr7oP_5d52w?autoplay=1&amp;version=3&amp;loop=1&amp;controls=0&amp;&playlist=dr7oP_5d52w&amp;showinfo=0&amp;fs=0&amp;playsinline=1&amp;modestbranding=1&amp;rel=0&amp;wmode=transparent&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fmoksii.myshopify.com&amp;widgetid=1" width="1904" height="120" frameborder="0">
     </iframe>   
    <img id="image-13243" class="cbb-video-bg-image" style="position: static; max-width: initial; width: 100%; height: 105vh; left: 0px; top: -0px; display: block;" src="https://img.youtube.com/vi/dr7oP_5d52w/maxresdefault.jpg">
  </div>

youtube.liquid

{% comment %}youtube video section{% endcomment %}
<div class="youtube-video">
  <div class="container">
    <div class="">
      <div class="youtube-video-content">
        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
        <div class='embed-container'>
          <iframe class="raihan-youtube" src='{{settings.youtube_video_link}}' frameborder='0' allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

youtuve-javascript.js

  function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}
var url = "{{settings.youtube_video_link}}";
var myId = getId(url);


$('.raihan-youtube').attr('src','https://www.youtube.com/embed/' + myId );
console.log("video url: " + url );