Responsive video player

Logan picture Logan · Sep 14, 2012 · Viewed 17.8k times · Source

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

P-S picture P-S · Oct 26, 2013

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>