Hi there,

That is a side effect for making sure the video fits all screen resolutions. The amount of black you see is determined by the amount of space available for the video to display. When viewing the site on a mobile device in landscape orientation, there will be less black on the top and bottom of the video player for example.

Hope that helps explain the current behavior.

Best,

Christopher

It did help indeed. Everything on the iPhone works perfectly, now. Only little beauty error would be the black bars on top and bottom of the 16:9 videoframe. They were there before, though. If i could get rid of those, that would be nice. Most vids play in 16:9.

Let me know if that helps.

Best,

Christopher

Hi there,

Your styling is overriding the responsive styling for the iframe. Try adding this to your Custom CSS box...

@media screen and (max-width:900px) {
#video iframe,
#video object,
#videor embed {
    width: 100% !important;
    height: 100% !important;
}
}

Hi Chris

Yes, I am adding that to the Custom CSS box on the Customize page. I might have messed up the expressions: I mean styling. The code appeared to look like programming so i called it script ;-)

I just changed the design back to a video height (y) of 480 and 853 in x for you to try on your iPhone. I am sure it is reproducable if you tried with your own designs. The link is:
http://www.redesign.tv/2015/10/07/fairway-filme-golfplatze-luftaufnahmen/

If you went there normally, without the code line in the CSS box, you would see a Vimeo videoframe to play. Now you see a portion of the frame, it does not downscale responsively as without the code line in the CSS box.

Do you know why?

Thank you again for your help.

Best,

Reto

Hi there,

Are you adding that to the Custom CSS box on the Customize page? Can you provide a link with that styling applied?

Just as a heads up to avoid confusion, that markup you posted above is referred to as "styling", not as a "script". "Script" is usually reserved for JavaScript markup. ;-)

Best,

Christopher

Hello. I really liked this:

#video iframe, #video object, #video embed {
height: 365px;
width: 650px;
}

to change the default video size. consequence is that after adding the script, safari on iphone cannot display the videos no more. even if you go back to the default size in the script (dimensions as above). i wanted mine to be a height of 480, which is perfect for browsers in computers. i have not tried yet the consequence on ipad but my page on iphone becomes unusable. so i deleted the script and everything works fine on the iphone again. any ideas?

Hi there,

Can you provide more details?

Is it behaving differently than the demo site? Reference: http://themes.themolitor.com/producer

Best,

Chris

Actually, regarding my last post, it's only a problem on Safari on iPhone. The mobile site on android devices seems fine.

Hi,

I just updated my website with the latest Producer upgrade, and the mobile site is now complete busted. The producer mobile experience was always poor, but not it is unusable. Please advised. http://www.bridgingstories.com.