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

Responsiveness with 7 not working?


I'm trying to set up a video as per the article on here, but I can not get the width to agree with my settings.
For instance this test page is definitely not 750px wide.

What am I missing?
Thanks!

Test page: http://jpmeyer.com/test.php

Code:
<html>
<head>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/mmiOhk3u.js"></script>
</head>
<body>

<div style="width:750px;border:solid 5px;" id="myjwp">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myjwp");
playerInstance.setup({
playlist:[{
image:"https://ourvideosite.com/data/3199-reception_002.MTS.jpg",
sources:[
{file:"https://ourvideosite.com/data/3199-reception_002.MTS.mp4",label:"1080p"},
{file:"https://ourvideosite.com/data/3199-reception_002.MTS_480p.mp4",label:"480p"}
],
title:"John P. Meyer, DDS reception area"
}],
aspectratio: "4:3",
width:"100%",
mute:"true",
autostart:"true",
startparam:'start'
});
</script>
</body>
</html>

3 Community Answers

Alex

JW Player Support Agent  
1 rated :

Hi, there.

Instead of setting width and border directly in the “style” attribute of your <div>, I suggest you try setting it in a <style> tag within the <head> of your document. You should also use max-width instead of width to make the player responsive.

So, your <DIV> would look like this:

<div id="myjwp">Loading the player...</div>

and the following should be put in the <head> of your document:

<style>#myjwp { max-width: 750px; border: solid 5px; }</style>

Please let me know if that works. Thanks!

levi

User  
0 rated :

Wow... As far as I knew those were interchangeable and the local style tag would override the one in the header...

But for whatever reason it works!

Thanks!

Alex

JW Player Support Agent  
0 rated :

Not a problem, Levi!

This question has received the maximum number of answers.