How To Embed Blogger Video Iframe To Be Responsive

How to Embed Blogger's Iframe Video to Be Responsive - Actually the video uploaded on Blogger doesn't need to be responsive because it's displayed with a size of 320x266 so that it can be safe on all device sizes.

But of course it makes it less comfortable watching the video when watched via a PC or laptop because of the small embed video size.

So if we embed an iframe video uploaded on Blogger to be responsive, this will be better because the video can appear full according to the width of the posting page and to suit all device sizes.

Actually, before this I have shared how to embed videos that are uploaded on Blogger using video elements to be responsive , but it seems that now the trick is not working anymore.

So now I share the trick to embed videos uploaded on Blogger to be responsive using iframe or amp-iframe elements so that this is the same as embed Youtube videos.

Videos uploaded in Blogger posts must have a maximum size of 100MB, if the size of the video is greater than 100MB then the video cannot be uploaded.

Now please upload your video in your blog post. After the video has finished uploading, please preview the post then right-click on the video and inspect the element. Then please look for the iframe URL with the following prefix:

  https://www.blogger.com/video.g?token= 

Then please copy the URL as shown below.

Click this to see the big picture

After that, please save the URL in notepad, then do as follows.

Non AMP Blog

Please save the following CSS in your blog style.

  .video-responsive {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   margin:0;
   width:100%
 }
 .video-responsive iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border:0;
 } 

Then please use the following code to display the video in the post.

  <div class="video-responsive">
 <iframe width="560" height="315" src=" xxxxxx" frameborder="0" allowfullscreen=""></iframe>
 </div>

Please replace the xxxxxx code with the Blogger video URL. The demo is like this:

Open Fiddle

AMP HTML blog

Like YouTube videos embedded with amp-iframes, Blogger videos also use the same code as the following.

  <amp-iframe allowfullscreen='' frameborder='0' height='270' layout='responsive' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation' allow='autoplay; encrypted-media' src=' xxxxxxx' width='480'>
 <amp-img height='270' layout='fixed-height' noloading='' placeholder='' src='https://imgcdn.000webhostapp.com/https/cdn.staticaly.com/28803805ec54e737052baa0e5a4708fc.png'></amp-img>
 </amp-iframe>

Please replace xxxxxxx with the URL of the Blogger video embed earlier.

The following are examples of videos that were uploaded on Blogger and displayed using amp-iframe.

And the following is a video on how to capture the URL of an embed video uploaded on Blogger to make it clearer how to get the URL.

May be useful.