Solved

Bootstrap 3 modal breaks fullscreen Vimeo in desktop Safari

Posted on 2014-03-02
9
1,906 Views
Last Modified: 2014-03-11
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.mydns.net.nz/modal_test.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!
0
Comment
Question by:Danzigger
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39899533
If you used a player embed into the modal you would not have this problem.  When you hide the modal, the iframe is still there.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    
    <title>Modal Test</title>
	
	<META name=robots content=follow,index>
 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom styles for this template -->
    

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
 
</head>

<body>

	<!-- Modal -->
    <div class="modal fade autoModal" id="playerModal" tabindex="-1" role="dialog" aria-labelledby="playerModalLabel" aria-hidden="true">
      <div class="modal-dialog" id="modal-dialog">
        <div class="modal-content">
   			
          <div class="modal-body" id="videoContainer">
          	<iframe src="//player.vimeo.com/video/86199659?portrait=0&amp;badge=0&amp;color=ff0179" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>  
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script>	
    $(document).ready(function() {
		$('#playerModal').modal('show');
      $('#playerModal').on('hidden.bs.modal', function (e) {
        $('iframe').remove();
       })
      
	});
    </script>
</body>
</html>

Open in new window

0
 

Author Comment

by:Danzigger
ID: 39902063
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?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39902368
If windows safari is your only issue, I wouldn't worry about it.  That has not received support since 2012 and I doubt anybody uses.  I just checked on of my sites that gets 30,000 uniques each month and it does not even show up.
0
 

Author Comment

by:Danzigger
ID: 39919224
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?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39919375
I just looked at one of my sites that has 114,000 visits.  45% of visits where safari (actually more if you include the in-app which are web-view apps).  Of that 45%, 4% were safari on ipad (8536.25), 70% v7, 19% v6, and 7% v5.    

7% of 45% is 3%.  That  number is going to drop over time.   I have found some quirks in safari 5 as I have in IE7 & IE8.  I don't support any of them.  With mac, those sarari5's are probably osx 10.5/10.6.  There is a reason they didn't pay the $25 bucks to upgrade, their machines are just too old.   Everything is changing too fast to worry about such a small percentage.  

I guess if you want a work around, just send them to a new page and forget the modal for those version.
0
 

Author Closing Comment

by:Danzigger
ID: 39919439
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39919523
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.
0
 

Author Comment

by:Danzigger
ID: 39919528
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... :)
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39920575
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.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now