No matter what stretching mode I use. iOS wanst to squeeze my video to the right with 30 to 50% of the player's right side black. I do not know how to work with this. The website is feedcheer.com and the video store on the site is the best place to look for the videos that will not stretch properly
I am seeing a 500 error when trying to load that page. What settings are you using in your player setup?
How does the player look in iOS on a test page that does not contain any other Javascript or CSS?
I have not tried. Because have to make it work on the site I have. Feedcheeer.com/test and /test two are a couple of attempts and using JavaScript resize. I will try to make a straight HTML page with an embed to see how that will work I will send the link.
Try a page with on the three items required to start our player:
1) The JW Player .js file (either self-hosted on your servers or a cloud-hosted player from your account dashboard)
2) An HTML <div> tag with a unique ID, like <div id='player'></div>
3) Your jwplayer().setup() call with at least the file: ’’ defined.
If you are using a single-line embed from your JW Player account dashboard, these three are created for you.
Please see http://support.jwplayer.com/customer/portal/articles/1406723-mp4-video-embed for more details on embedding the player. See http://support.jwplayer.com/customer/en/portal/articles/2186238-troubleshooting-creating-a-reproduction-page for more details on what we like to see in a reproduction page.
If you are not seeing any problems in iOS on this test page, the first thing I would check on your actual page is an extra <div> around the player. I have seen nested <div>’s that prevent the browser from taking the player full screen in some scenarios.
I did a test page at www.feedcheer.com/jwplayer.html and it works perfect accross all browsers. so I will have to figure out what I can do to find what is causing the issues. (javascript and/or css) on the pages i need the player on. The main pages I need to work are the playlist page.
http://www.feedcheer.com/members/playlist/
and several sales pages like this page: http://www.feedcheer.com/product/sccbc16-texas-cheer-allstars-stars-allstar-prep-level-1-mini-prep-sat/
Is there a way or a tool I can test to find the conflicting div or script?
In my opinion, the best way to troubleshoot player issues on an iPhone is to connect your phone to a Mac and inspect the DOM in Safari on your Mac. Please see Apple’s documentation for this at https://developer.apple.com/library/iad/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
Thank you Todd it was a css setting for Objects in the default CSS settings. I remove the setting and videos work perfectly and responsively across all devices and browsers that I have tested thus far.
The Offending css:
embed,
iframe,
img,
object,
video {
max-width: 100%;
}
iframe {
border: none;
}
Understood, thanks for replying. Yes, any CSS that applies to any <video> or <object> tag on the page may be unintentionally making changes to our player.
