In this article, I will show you how to Embed Video Responsive, which is expanded to different types of devices such as: Smart Phone, Tablet. , Desktop ... etc.
1. Go to Theme => Edit HTML and copy the following code from above </head>
<style type="text/css">
#iframe-player{position:relative;overflow:hidden;width:100%;height:100%;border-radius:5px}
.iframe-container{border:4px solid #ff0000}
.iframe-responsive{position:relative;overflow:hidden;width:100%;height:100%;padding-top:56.25%;background-color:rgb(0,0,0)}.iframe-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}</style>
2. Copy the following code from above </body>, then click the Save Icon and leave the Edit HTML tab.
<script type="text/javascript">
$('#iframe-player').each(function () {
let $this = $(this),
zeroIndex = 0,
buildIframe = "";
buildIframe += '<div class="iframe-container">';
buildIframe += '<div class="iframe-responsive">';
buildIframe += '<iframe id="video-iframe" src="' + embedSource[zeroIndex] + '" width="100%" height="100%" allowfullscreen="true" loading="lazy"></iframe>';
buildIframe += '</div></div>';
$this.html(buildIframe);
});
</script>
3. Copy the following code into the Blog Post by converting to HTML view
<div id="iframe-player"></div>
<script>
let embedSource = ["https://vdoview.tumblr.com/?id=2648030186054"];
</script>
<script>
let embedSource = ["https://vdoview.tumblr.com/?id=2648030186054"];
</script>
4. Change the video link above and click Publish.
