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?
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With