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?

Tomato

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>

Forerunner

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

Coffeepot

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!

Glair

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

Acuna

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).

Callida

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


                            });

Corkwood

Answer 7

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

Imparity

The same answer goes regardless of what video player you want to use. You only need to update the options to include your particular video player name. – Imparity