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.