Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive video player

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?

like image 783
Logan Avatar asked Sep 14 '12 11:09

Logan


People also ask

How do you make a video element responsive?

All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.

How do I make a video mobile responsive?

Here's how to make a youtube video mobile: You will need to wrap the responsive youtube embed code with a div and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position.

Is HTML5 responsive?

HTML5 enables one to write truly “responsive” apps. This is an app that will automatically resize based on the browser and screen size; automatically detect and change the user interface (UI) to reflect that of the platform on which the app is running; and will change according to the orientation of the device.

Is HTML5 mobile responsive?

Responsive designs let you turn your regular desktop web applications into user-friendly mobile websites. Responsive designs use CSS3 and HTML5 to cater to mobile device screen sizes.


1 Answers

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>
like image 161
P-S Avatar answered Oct 10 '22 01:10

P-S