Responsive video player - responsive-design

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

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%;
}

Answer 3

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 4

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 5

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 6

This work well for me
JW Player goes here
<script type="text/javascript">
if($( window ).width() <= 400){
pl_width = 300;
pl_heith = 150;
}else if($( window ).width() <= 600){
pl_width = 500;
pl_heith = 250;
}else{
pl_width = 700;
pl_heith = 350;
}
//alert(pl_width);
jwplayer("video_top").setup({
flashplayer: "<?php echo $player_path; ?>",
file: "<?php echo $your_file; ?>",
controlbar: "bottom",
height:pl_heith,
width:pl_width
});

Answer 7

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