How to Make Youtube Videos on Blogs Responsive on All Devices (Latest Script)

When we take a video from Youtube and put it on a blog (embed) there is one drawback that often occurs, namely the frame size of the video iframe does not follow the screen size or is unresponsive. Even though there are far more visitors to our blog from mobile devices than desktop devices

Like the example below


When opened from a smaller device, the Youtube iframe is too big and goes out of the post boundary line. Looks weird. do not worry, there is a script that can be a solution to this problem.

Install Youtube Responsive iFrame Video Embed Script

In the past, videos could be embedded with data-src markup. But it's complicated and you have to change the official Youtube embed code. very inefficient

With this latest script, there is no need to change the writing of the embed code. So much more practical. Save the code "BEFORE / ABOVE" </body>.

<script> //<![CDATA[
/* Youtube Responsive */
window.onload = function ignielYtube() {
  var youtube = $('iframe[src*="youtube.com"]');
  youtube.each(function() {
    $(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%');
  });
  $(window).resize(function() {
    youtube.each(function() {
      $(this).attr('height', $(this).width() * $(this).attr('aspectRatio'));
    });
  }).resize();
};
//]]> </script>

Youtube Video Embed Code Writing

As mentioned above, writing the embed code to insert Youtube videos into posts is done in the normal way. Just take the embed code and write it as usual. 


Then later the end result will be like the image below if the Youtube video is opened from a mobile phone or other device with a smaller screen size.


So, be responsive. Judging from the cellphone, the size will follow the size of the screen

Post a Comment

Previous Post Next Post

Contact Form