When developing a website, we often get some problem with size of video , img and content in web interface. If using responsive design layout for your website, when visitor in different screen size visit your website, the layout will resize the element automatically such as: div, img, text , etc... But video from another system like youtube, vimeo ... alway fix width and height in pixel. How to solve that ?

 Solution: Using javascript to resize video on your site based on the width and height of parent class.

Take a look at this cript
/*Resize embedded video*/
    var vwith=$('object').parent().width();
    resizeVideo(vwith);

    function resizeVideo(vwith){
        var vheight= vwith/1.77778;
        $('object').attr('width', vwith+'px');
        $('embed').attr('width',vwith+'px');
        $('object').attr('height', vheight+'px');
        $('embed').attr('height',vheight+'px');
    };


When the browser finish load the HTML DOM. the parent element of video Object have the width attribute, we can get that width.

After that, set the 'width' attribute of 'object' and 'embed' in pixcel. The formula:
 var vheight= vwith/1.77778;
based on the Youtube Video standard, you can change it if you want.

Good luck !

Don't forget to comment in this entry. Your comment will help us work !!! ^^ Thanks !