Steps to Increase Embedded YouTube Video Size or to Make Videos Responsive / Full-Width Automatically Just by Adding a Small Piece of HTML Code on Your Blogspot.

How to Increase Video Size in Blogger Posts

Updated on: July 28, 2020
How to increase video size in blogger posts
Steps to change youtube video size for blogger posts

Embedding a YouTube video in your blog post is the best practice to make your post content rich and visually effective. Moreover adding videos in your post helps you to decrease the bounce rate and increases your revenue.

We can easily add videos on our posts by using blogger post editing tool bar but by default blogger post's video size is small and doesn't fill the whole post width, that small size can affect your video impact on readers. So, to increase the size of your blogger video (By maintaining its ratio) so that viewers can see clearly just follow the give tutorial with images.

Post video before and after

Steps: How To Change YouTube Video Size

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Edit HTML Template

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):

</head>

Step 3. Just above it place the following code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script>
$('.BLOG_video_class').ready(function(){
$('.BLOG_video_class').parent().css({
    'position': 'relative',
    'padding-bottom': '56.25%',
    'height': '0',
    'clear': 'both',
    'text-align': 'center',
    'margin': '20px 0'
});

$('.BLOG_video_class').css({
    'position': 'absolute',
    'top': '0',
    'left': '0',
    'width': '100%',
    'height': '100%',
});
});
</script>

Step 4. Click Save template.

Done !

All of your embedded YouTube videos will be of full size and responsive with your post width. If you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Love it? Don't forget to Subscribe
  • Ahmadullah Mirza
    Ahmadullah Mirza
    22 June 2017 at 22:13
    This comment has been removed by the author.
    Saurabh Jarial
    Saurabh Jarial
    23 June 2017 at 17:55
    Hi Ahmadullah Mirza
    The tutorial is working fine. Try again.
    If you still face any issue then contact me via contact form mentioning your blog address.
  • Pallabi Ghosal
    Pallabi Ghosal
    18 September 2017 at 19:24
    Awesome, thank you so much!
    Saurabh Jarial
    Saurabh Jarial
    21 September 2017 at 08:11
    Thanks!
    Happy blogging!
  • Nasro Galili
    Nasro Galili
    7 October 2017 at 18:40
    Thank You So Much <33
    Saurabh Jarial
    Saurabh Jarial
    8 October 2017 at 12:31
    My pleasure :)
  • Mack
    Mack
    26 January 2018 at 01:07
    Thanks a lot ! That's exactly what i was looking for.
  • Lily "Miss July" Ferrari
    Lily "Miss July" Ferrari
    30 March 2018 at 20:53
    This comment has been removed by the author.
    Saurabh Jarial
    Saurabh Jarial
    9 April 2018 at 09:12
    Happy Blogging!
  • Unknown
    Unknown
    26 July 2018 at 09:53
    nice
  • OdiaMovieDB
    OdiaMovieDB
    11 August 2019 at 22:16
    The code works miraculously making the videos expand to full width. But... it probably conflicting with other codes. My whole post content disappears, showing only one full width YouTube video in the post.
    Saurabh Jarial
    Saurabh Jarial
    18 August 2019 at 20:50
    I visited your blog and everything seems good. I hope you found the solution.
  • iTouch
    iTouch
    6 March 2020 at 15:41
    Thanks!!!
  • Cherry
    Cherry
    5 June 2020 at 09:11
    hello! it doesn't work on my blog, may i know whats the problem?
    Saurabh Jarial
    Saurabh Jarial
    27 July 2020 at 21:10
    Replace every occurrence of ".YOUTUBE-iframe-video" with ".BLOG_video_class"
  • Maria Rodrigues
    Maria Rodrigues
    17 August 2020 at 03:55
    It worked perfectly! Thank you :)
  • SL Dawasa
    SL Dawasa
    18 November 2020 at 13:02
    This is working perfectly !