Danzigger
asked on
Bootstrap 3 modal breaks fullscreen Vimeo in desktop Safari
Hi
I'm using a Bootstrap 3 modal to display Vimeo embedded videos. Works fine in all major browsers except that desktop Safari (on Mac and Windows) will not display full screen when the full screen button is clicked during video playback.
After clicking the full screen button on Windows Safari the video can be seen playing extremely small at the top of the screen. On Mac Safari the video expands to full screen for half a second and then disappears.
Example here: http://vidmode.com.win2.my dns.net.nz /modal_tes t.html
(Play the video in desktop Safari and click the full screen icon to see the issue.)
Is there some CSS or JS I can use to resolve this?
Thanks a lot for all advice!
I'm using a Bootstrap 3 modal to display Vimeo embedded videos. Works fine in all major browsers except that desktop Safari (on Mac and Windows) will not display full screen when the full screen button is clicked during video playback.
After clicking the full screen button on Windows Safari the video can be seen playing extremely small at the top of the screen. On Mac Safari the video expands to full screen for half a second and then disappears.
Example here: http://vidmode.com.win2.my
(Play the video in desktop Safari and click the full screen icon to see the issue.)
Is there some CSS or JS I can use to resolve this?
Thanks a lot for all advice!
ASKER
Thanks for your reply, Scott. In your example, in Safari (Windows) if I play the vid and then click the full screen icon it still shows the same behaviour as before. ie. The clip can be seen at very small dimensions playing at the top of the window.
Not able to test on a Mac right now.
Any ideas?
Not able to test on a Mac right now.
Any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi. Good point about Windows Safari but it is still broken in Mac Safari 5.1.10. It's fine in Mac Safari 6+.
For now I've removed the full screen option but I would really love to make it work. Any other ideas?
For now I've removed the full screen option but I would really love to make it work. Any other ideas?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks a lot, Padas. It's a film industry site so the percentage of Macs will be higher than normal but I would think that the site you mention above is higher than normal Mac percentage too. I'll keep an eye on the browser stats once it's been up for a while and decide then how to handle the older Safari browsers (if at all) in terms of full screen view.
The percentage of safari will be higher in part for ios and osx. I would suspect the movie industry would have even less percentage of safari 5.
ASKER
I'm sure you're right, and I probably wouldn't have ever noticed the issue on Safari 5.1 but the client has a machine running it... :)
I had a client with a different issue with safari5 and when I explained the stats she just upgraded and all was good.
I think you are going to have to just send to a full page based on the useragent.
I think you are going to have to just send to a full page based on the useragent.
You can listen for the modal to be hidden and use jquery to remove the iframe when that happens. http://jsbin.com/jiqot/1/edit?html,output
Open in new window