CSS fix for elastic video & JWPlayer 5 not working in iPad & iPod Touch (IOS 7.1)
I have been working on embedding JWPlayer 5 into a flexible grid. I have read through the forums and have used the CSS/100% width fix on my test page at http://www-test.ulib.csuohio.edu/mediaflash/responsive/index4.html. I tested it on several different browsers and on different platforms, and the video works nicely except when tested on an iPad and an iPod Touch with IOS 7.1. Nothing appears when viewed on those devices.
Here are the styles:
bc.. .video-wrap { width: 50%; border:1px solid #f00; }
#video_wrapper {
font-size: 0.9em;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 20px;
position: relative;
}
#video_wrapper embed, #video_wrapper object, #video_wrapper iframe {
max-height: 100%;
max-width: 100%;
height: 100%;
left: 0pt;
position: absolute;
top: 0pt;
width: 100%;
}
And here is my code:
bc.. <div class="video-wrap">
<div id="video"></div>
<script type="text/javascript">
jwplayer("video").setup({
height: "100%",
width: "100%",
stretching: "fill",
controlbar: "bottom",
image: "/mediaflash/graphics/csu-video.png",
skin: "/mediaflash/player5/glow.zip",
plugins: {"gapro-2" : {idstring : "||streamer||/||file||"}},
modes: [
{ type: "flash",
src: "/mediaflash/player5/player.swf",
config: {
file: "cmp-mrstress.f4v",
streamer: "rtmp://flash.ulib.csuohio.edu/vod/",
provider: "rtmp"
}
},
{ type: "html5",
config: {
file: "http://flash.ulib.csuohio.edu/hls-vod/cmp-mrstress.f4v.m3u8",
provider: "video"
}
}
]
});
</script></div>
Any help would be appreciated. Thanks.
