How to Embed Responsive iFrame Video

 

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>

4. Change the video link above and click Publish.