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

HTML5 scaling in Safari / iOS devices

I have the latest version of JW6 Premium embedded here:

https://www.therootschannel.com/media/wood-brothers-pay-day

My problem is that responsive scaling works incorrectly on Safari / iOS devices. The video doesn't fill the frame of the player, unlike the Flash version which loads on Firefox, etc. I have tried all values of the scaling attribute with no luck. As you can see from the link above, resizing the browser window makes the video proportionally smaller in its frame. How can I fix this?

5 Community Answers

Up Down

wmeier

User  
-1 rated :

@Michael

I would in the first place make sure that your web site validates which it does not.

Simply put, it does not conform to known standards and as a result it is rendered not as a 'standard' mode BUT as 'quirks' mode. Each browser type will handle 'quirks' mode rendering differently.

I would always check validation with "Total Validator" before using W3C validation services by virtue it is more explanatory as to why it does not validate.

Once you have validation then we can proceed to your issue.
btw, I love iframe and use them on my web site.

I also notice that you are using HTML5 consider using HTML5.1. Why? HTML%.1 will validate as 5 and 5.1 BUT HTML5 will only validate as 5. HTML5.1 is more robust.


I would in any case remain with HTML5/5.1

If you like to see a web site written with HTML5.1 feel free to visit my web site www.starbase-alpha.com which I am currently updating with JWPlayer 6.9beta examples



You have parsing and HTML errors present that will as a result
render it in

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Also have you tried with a <video> tag as well?

Up Down

michael

User  
0 rated :

The <video> tag approach works fine and scaling works as expected.

While I definitel want to fix the validation issues on the page, I don't think that's the source of the problem, as I see multiple references to this same issue in the knowledgebase (but no clear answer.)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

The first thing I would do is create a blank html page with just the jw player on it, and see if you have the same issues. It might be an issue with the css in the html5 player clashing with your site’s css.

Up Down

michael

User  
0 rated :

The blank page with the JW player works fine. There is clearly some sort of CSS conflict but it's not easy to see how to narrow down the suspects.

Digging into the document tree in Safari, the "span.jwvideo" element has the correct width (close to the whole window width) but its child, the video tag itself, has a tiny size, which is proportional to window size (the narrower the overall browser window, the smaller the video gets within the player.)

I see that something in the javascript is dynamically applying styling to this video tag -- in this case, it looks like the following:

element.style {
height: 480px;
width: 853px;
-webkit-transform: scale(0.3962485345838218, 0.3958333333333333);
left: -258px;
right: -258px;
bottom: -145px;
top: -145px;
}

That scaling factor of .39 is approximately the fraction of the player DIV occupied by the video. So it seems like something is going wrong with this scaling. If I disable this style in Safari, the video briefly appears at the right size before quickly being reset by the javascript.

Help?

This question has received the maximum number of answers.