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

JW Player Responsive Width


Hello,

I am trying to make the JW Image Rotator Flash Slideshow maintain a 100% width at all times. I am using the next gen gallery. I have achieved responsivity with the non flash player, but it does not have a full screen option which I want. I have researched this issue and with no success.

Can anyone help?

newfiretrucksunlimited.davidreyburn.com/used-fire-trucks-for-sale/1998-e-one-pumper-1/

Thanks!

3 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

For responsive design, I would recommend this method:

http://webdesignerwall.com/tutorials/css-elastic-videos

JW Player

User  
0 rated :

Thanks for the tip. That method seems like it should work, but it is not for me. The way I am embedding the next gen galleries is through Wordpress short codes. Below is the code that is being generated from the short code. The container does seem to re size, but the images are not resizing, just being cropped. Also they are cropped a little on the bottom before the window is re sized at all.

This may not have any effect on the flash slideshow, but in order to achieve respsonsivity with the non flash player I had to use media queries to change the height of the container so the content below was not too far away, see below. This seems like a very ghetto way of fixing the problem for the non flash player. Any suggestions?

<div class="video-container">
<div class="ngg-galleryoverview"><div class="slideshowlink"><a class="slideshowlink" href="/used-fire-trucks-for-sale/1998-e-one-pumper-1/?show=gallery">[Show picture list]</a></div><div class="slideshow">
<div class="swfobject" id="so83_1" style="width:810px; height:535px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a> and <a href="http://www.mozilla.com/firefox/">a browser with Javascript support</a> are needed.</p>
</div></div>
<script type="text/javascript" defer="defer">
var so83_1 = {
params : {
wmode : "opaque",
allowfullscreen : "true",
bgcolor : "#000000"},
flashvars : {
file : "http%3A%2F%2Fnewfiretrucksunlimited.davidreyburn.com%2Findex.php%3Fcallback%3Dimagerotator%26gid%3D83",
shuffle : "false",
overstretch : "true",
rotatetime : "4",
transition : "fade",
backcolor : "0x000000",
frontcolor : "0xFFFFFF",
lightcolor : "0xCC0000",
width : "810",
height : "535"},
attr : {
styleclass : "slideshow",
name : "so83"},
start : function() {
swfobject.embedSWF("http://newfiretrucksunlimited.davidreyburn.com/wp-content/plugins/nextgen-gallery/imagerotator.swf", "so83_1", "810", "535", "7.0.0", false, this.flashvars, this.params , this.attr );
}
}
so83_1.start();
</script></div>
<div class="ngg-clear"></div>





-----------------------------------------------


.ngg-slideshow {
overflow:hidden;
position: relative;
width: 99% !important;
margin: 15px auto;
}

.ngg-slideshow * {
vertical-align:middle;
width: 100% !important;
height: auto !important;
}


@media only screen and (max-width: 1175px) {
.ngg-slideshow {
height: 490px !important;
}
}

@media only screen and (max-width: 1070px) {
.ngg-slideshow {
height: 450px !important;
}
}

@media only screen and (max-width: 1024px) {
.ngg-slideshow {
height: 430px !important;
}
}
@media only screen and (max-width: 920px) {
.ngg-slideshow {
height: 350px !important;
}
}

@media only screen and (max-width: 768px) {
.ngg-slideshow {
height: 470px !important;
}
}
}

@media only screen and (max-width: 700px) {

.ngg-slideshow {
height: 380px !important;
}
}


@media only screen and (max-width: 640px) {

.ngg-slideshow {
height: 350px !important;
}
}


@media only screen and (max-width: 480px) {

.ngg-slideshow {
height: 300px !important;
}
}

@media only screen and (max-width: 400px) {

.ngg-slideshow {
height: 245px !important;
}
}


@media only screen and(max-width: 380px) {

.ngg-slideshow {
height: 225px !important;
}
}


@media only screen and(max-width: 350px) {

.ngg-slideshow {
height: 120px !important;
}
}
@media only screen and (min-width: 321px) and (max-width: 349px) {

.ngg-slideshow {
height: 165px !important;
}
}
@media only screen and (min-width: 0px) and (max-width: 320px) {

.ngg-slideshow {
height: 90px !important;
}
}

Ethan Feldman

JW Player Support Agent  
-1 rated :

Email us for an example of this technique working – http://www.longtailvideo.com/contact-us

This question has received the maximum number of answers.