Responsive video player

Question

I need a video player for responsive layout website which is developed by using bootstrap. That means when i do re-size the screen or viewing the page in different size screens the player should be automatically fit to the screen.

I had tried with jwplayer and flowplayer but it didn't work.

http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight

note: The player should be able to play the youtube videos....

Is there anyway to make jwplayer/flowplayer responsive?

Answer 1

Better version of Luka's answer:

$(window).resize(function() {
    var $width = $("#holder").width();
    var $height = $width/1.5;
    jwplayer().resize($width,$height);
});

User the resize function from the JW Player API:

http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player

Another solution:

Check their Responsive Design Support documentation: http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support

<div id="myElement"></div>
<script>
    jwplayer("myElement").setup({
        file: "/uploads/myVideo.mp4",
        image: "/uploads/myPoster.jpg",
        width: "100%",
        aspectratio: "12:5" // Set your image ratio here
    });
</script>

Answer 2

The easiest way is to use javascript

 function sizing() {
        $('#player').css('width', $('#container').outerWidth());
        $('#player').css('height',$('#player').outerWidth() / 1.33);
    }

    $(document).ready(sizing);
    $(window).resize(sizing);

Don't forget to include jquery library and to change the aspect ration (1.33 is for 4:3, 1,77 is for 16:9).

Answer 3

You can just use YouTube videos in your site and use the FitVid.Js plugin to make it responsive.

Answer 4

I am using jQuery for resizing. #holder is your div where movie is positioned (#videocontainer).
Structure:

<div id="holder">
    <div id="videocontainer"></div>
</div>

It takes #holder size and give it to #videocontainer. It works in ie9, ie8, ...

$(window).resize(function() {
    var $width = $("#holder").width();
    var $height = $width/1.5;
    jwplayer("videocontainer").setup({  
    flashplayer: "jwplayer/player.swf",
    file: "###.mp4",                            
    width: $width,
    height: $height,
    image: "###.jpg"
    });
});

Hope it helps!

Answer 5

Try FitVids: http://fitvidsjs.com/

If you want to make jwPlayer responsive, try adding this to your CSS file:

#video-jwplayer_wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 format */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
#video-jwplayer_wrapper iframe, #video-jwplayer_wrapper object, #video-jwplayer_wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

source: http://webdesignerwall.com/tutorials/css-elastic-videos

When calling jwplayer, you might also need to set width to 100%:

jwplayer("myElement").setup({
    width: 100%
});

Answer 6

you can change by simple css style

/* Video small screen */
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}