Get in touch with me Let's build something great.

YouTube Resizer jQuery Plugin

From December 28th, 2009 | 9 Comments
The jQuery YouTube Resizer plugin automatically resizes embedded videos to fill up the entire content space. It expands the video if the content area is larger and contracts if it is smaller.

My first jQuery plugin is now available for download. After using the JavaScript framework for a couple of years, I started getting curious of what it takes to write a plugin for it. I was happy I finally got to read more of the developer documentation and look into more advanced jQuery implementations.

What does it do

The YouTube Embedded Video Resizer will automatically resize videos that you embed onto your page so that it actually looks like the video was designed to fill the space. If you just copy & paste the embed code that YouTube provides, you’ll often have a video that only partially fills your content space and looks out of place.

Demo & Download

Click here to check out the plugin for yourself: YouTube Embedded Video Resizer

Furthermore

There are use instructions provided on the demo page that demonstrate how to use the plugin on your own site.

Are you using it on your own site? Do you have any questions or feedback? Let me know in the comments.

9 Responses

  • Ian
    December 28, 2009 at 4:21 pm

    Looks brilliant!

    But could you make part two of the instructions more explicit? Where is “the following bit of code” used?

    And where does youtubeResize.js go? At the site root?

    Thanks.

    • Trevor Fitzgerald
      December 28, 2009 at 4:35 pm

      Ian,

      Great suggestion. Thanks for the feedback. I just updated the documentation to hopefully make it clearer. Let me know if you have any other questions.

  • Ian
    December 28, 2009 at 5:52 pm

    Thanks for doing that so quickly, Trevor.

    I’m running into trouble making it work with WordPress.

    Based on advice from here …
    http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    … I’ve put youtubeResize.js in the js folder and added this to header.php:

    <script type="text/javascript"
    src="/js/youtubeResize.js”>

    jQuery(document).ready(function(){
    jQuery.youtubeResize();
    });

    Still not working, though. If anyone can help I’d be very grateful.

  • Ian
    December 28, 2009 at 5:54 pm

    Code snipped should read:

    
    <script type="text/javascript"
       src="/js/youtubeResize.js">
    
    	jQuery(document).ready(function(){
    		jQuery.youtubeResize();
    	});
    
  • Ian
    December 28, 2009 at 5:56 pm

    Sorry, Trevor … php code is being stripped out of my snippet in my replies.

    Looks as if I’ll have to work it out for myself!

    Cheers.

    • Trevor Fitzgerald
      December 28, 2009 at 11:40 pm

      Ian,

      I just made a WordPress plugin that makes it easy now. Want to check it out? http://youtube.dev.trevorfitzgerald.com/

      • Ian
        December 29, 2009 at 5:23 am

        Sensational, Trevor! Automatic resizing is going to save so many people so much time. Many thanks.

  • January 3, 2010 at 11:56 pm

    Hi Trevor,
    This is great thanks, I was wondering if you mind if I added the ability for it to also resize Vimeo videos the same way, as most of my vids are there?
    I don’t want to take your credits out or anything just add in a line to handle Vimeo. Is that ok?
    Thanks.

    • Trevor Fitzgerald
      January 4, 2010 at 10:56 am

      Ryan,

      That’s great. I’m glad you were able to get it to work. I don’t mind at all.

Leave a Reply

Are you on Twitter? You can also comment via Twitter by clicking here.

Please enter your name, e-mail address, and comment. Thank you!
Twitter

Twitter Updates

  •  

You should follow me on Twitter here.

RSS

From The Blog

03Mar

Introducing Earthly WordPress Theme

Based on my first WordPress theme, Crispp, Earthly incorporates a color scheme designed for sites that require an eco-friendly or earthy theme. Features 100% Free Consistent styling across all major …

Continue Reading…

28Dec

YouTube Resizer jQuery Plugin

The jQuery YouTube Resizer plugin automatically resizes embedded videos to fill up the entire content space. It expands the video if the content area is larger and contracts if it is smaller. My first…

Continue Reading…