Display youtube video inside the image (as a border)

Task: Display youtube video inside (over) the image as a border.

Implementation:

<div style="margin-left: 40px;margin-right:40px; ">
  <div style="position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0;"> 
    <iframe 
      style="box-sizing: border-box; 
        background: url(/wp-content/uploads/2020/11/image.png) center center no-repeat;
        background-size: contain;
        padding: 3% 12% 20%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;"
      src="https://www.youtube.com/embed/<videoID>"
      frameborder="0" allowfullscreen>
    </iframe> 
  </div>
</div>

Note: set different border values (paddings and margins) according your image and video position.

Done.

Leave a Reply

Your email address will not be published. Required fields are marked *




Enter Captcha Here :