Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Bootstrap responsive Autosizing with jwplayer 6


I want the player to be installed in bootstrap.

E.g. http://twitter.github.com/bootstrap/examples/hero.html

where "hello world" is supposed to be the video. (responsive)

I'm not interested on iframes

I've been searching for days.

Can anyone please make a demo page with boattramp?



Is there a possibility?



Greeting Frank

5 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

I have never used bootstrap before, but I have done responsive embedding using this iframe technique before – http://webdesignerwall.com/tutorials/css-elastic-videos

JW Player

User  
0 rated :

Try my solution. I actually use this in a bootstrap site.

http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/31411/support-responsive-design-dynamic-sizing

JW Player

User  
0 rated :

great it is!

Thank you.



bc.. jQuery(document).ready(function() {
var parentWidth = document.getElementById("videoPlayer_wrapper") != null ? document.getElementById("videoPlayer_wrapper").parentNode.offsetWidth : document.getElementById("videoPlayer").parentNode.offsetWidth;
jwplayer("videoPlayer").setup({
playlist: [
{
title: "TITLE",
captions: [
{ file: "FILE", label: "English" }
],
image: "FILE",
file: "FILE"
}
],
width: parentWidth;,
height: parentWidth * 720 / 1280,
stretching: "exactfit"
});
// Responsive player resizing after initialization
jQuery(window).resize(function() {
var parentWidth = document.getElementById("videoPlayer_wrapper") != null ? document.getElementById("videoPlayer_wrapper").parentNode.offsetWidth : document.getElementById("videoPlayer").parentNode.offsetWidth;
var calculatedHeight = parentWidth * 720 / 1280;
if (jwplayer("videoPlayer").getWidth() != parentWidth) {
jwplayer("videoPlayer").resize(parentWidth, calculatedHeight);
}
});
});


JW Player

User  
0 rated :

Feel free to clean it up a bit, etc. (e.g. aspectRatio should probably be a var to centralize that calculation, etc.).

The downside is that on window resize it has to call that event handler to resize the player, which is kind of hacky and inefficient, but until Longtail implements the responsive design stuff I've been badgering them about (6.4 they say), it's the best way I found to handle this without extensive source code changes.

Ethan Feldman

JW Player Support Agent  
0 rated :

Very nice :)

This question has received the maximum number of answers.