Jump to content
Search Community

Video Disappears when Resizing window (Safari only)

soupking test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everybody,

 

This really isn't a GS question but I couldn't find any currently popular HTML5 forums online. If anybody does, I'm all ears.

 

I've got this situation that when I resize my browser window in Safari, the video disappears. What' odd is that it doesn't happen every time.

 

Has anybody had this happen before?

 

Thanks for reading?

Link to comment
Share on other sites

Hello soupking,

 

I have seen this before.. and looks like a webkit render bug.

 

What you can try is to basically after a resize event, you can just hide and show the <iframe> video.. like this:

// using jQuery - requires jQuery 1.7+
$(document).on("resize", function(){
     $("#myIframe").hide().show();
     // or do this
     // $("#myIframe").css("display","none").css("display","block");
});

// using native javascript - if iframe ID is #myIframe
window.resize = function(){
     var myIframe = document.getElementById("myIframe");
     myIframe.style.display = "none";
     myIframe.style.display = "block";
};

Also if you have any transforms on your <iframe> make sure you set the transform back to its default values of ZERO or remove the transform on the element completely. Because transforms on a video <iframe>, like YouTube or Vimeo, will have rendering issues when transforms are still applied on them. In that case it is best to wrap the <iframe> in a div and animate the div instead.

 

You could possibly use clearProps on the <iframe> to clear transforms, all, or the property you defined in your tweens.

// using GSAP
var myIframe = document.getElementById("myIframe");
TweenLite.set(myIframe, {clearProps:"all"});

clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.

 

Two other things ..

  • Do you have the <iframe> attribute allowtransparency="true" on your <iframe>?
  • When the page loads are the iframe hidden and then you animate them in?

See if that helps? :)

Link to comment
Share on other sites

Hey Jonathan,

 

I am using GSAP which I understand uses JQuery-like stuff? Is their library included in GSAP or is there another script I need to pull to test that code?

 

I'm currently importing the following:

 

<script type="text/javascript" src="_scripts/js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="_scripts/js/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>
 
Should that do it? I have some additional JQuery scripts in a folder but I've never really used JQuery that much so I'm not sure what 's common?
 
Do I need another script to run this? I am importing CSSPlugins and webkit can be affected by CSS. Wasn't sure if that was related or not.
 
Thanks a bunch for the tip! :)
Link to comment
Share on other sites

Above I included the native javascript way, so you wouldn't need jQuery:

// using native javascript - if iframe ID is #myIframe
window.resize = function(){

     var myIframe = document.getElementById("myIframe");
     myIframe.style.display = "none";
     myIframe.style.display = "block";

};

if you just include the following you won't need the other 2 scripts because TweenMax.min.js includes the CSSPlugin, EasePackPlugin and much more, see TweenMax Docs:

<script type="text/javascript" src="_scripts/js/greensock/TweenMax.min.js"></script>

or if you just need to control the file size of your page you could just include TweenLite.min.js, CSSPlugin.min.js, and EasePack.min.js like this:

<script type="text/javascript" src="_scripts/js/greensock/TweenLite.min.js"></script>
<script type="text/javascript" src="_scripts/js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>

or use the CDN:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js"></script>

Also to better help you a codepen example demo would help to see what you are seeing.  Here is a cool video tut by GreenSock on How to make a GreenSock codepen demo!

 

:)

Link to comment
Share on other sites

Cool, that's good to know. 

 

What's funny is that this wasn't the fix. I think I found the problem though. I had a CSS tag referencing a poster BG that was a dead link from a template I used. I then also had a poster file in my HTML video tag markup. These both being active code conflicted with each other and some how the video disappeared and the poster JPG in the HTML markup took over. 

 

Not sure why Safari read it that way but that was the problem.

 

I tried doing a codepen but couldn't figure out how to get the thing working on this one. I'll have to try working with something less complex starting out to get used to it I think.

 

Thanks anyway Jonathan! Really appreciate it! :D

Link to comment
Share on other sites

It could be a number of things causing it.. best to provide us a reduced codepen example so we can see what you are seeing.  Here is a nice video tut by GreenSock on How to make a GreenSock codepen demo!

 

I notice you didn't answer my questions above:

  • Do you have the <iframe> attribute allowtransparency="true" on your <iframe>?
  • When the page loads are the iframe hidden and then you animate them in?
  • Are you applying transforms on your iframe?

We are willing to help, but without seeing your code in context and seeing code we can edit in a live editable environment.. so we can help you better.

 

Thanks

Link to comment
Share on other sites

Hey Jonathan,

 

I don't have any iframe tags in the page. What's more bizarre is I believe it's working. I'm not sure what to think at this point other than, heh, fine, great, stay.

 

If I have more issues I'll try CodePen again. 

 

Thanks for the help! :)

Link to comment
Share on other sites

The video tag could be collapsing on resize. If you provide an codepen demo example it will be easier to see what your code looks like to better help you. This way we can see HTML, CSS, and JS in context. This way we can test your code live.. thanks soupking! :)

 

Does your video tag have a defined width and height attribute on the video tag.. or are you setting that in your CSS

 

 

here are some styles to set on your <video> tag:

 

keep video proportional:

video {
     max-width: 100%;
     /* force correct aspect ratio */
     height: auto !important;
}

You can wrap the <video> tag in a div.. then on resize keep aspect ratio by using this CSS:

video-wrapper {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

.video-wrapper video {
     position: absolute;
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0;
}

basically the above helps when resizing the video, which is what fitvids.js does but programmatically on all videos for your site.

 

:D

Link to comment
Share on other sites

Ahhh, that makes sense. As far as I can tell it's working okay now. Was just a strange poster image glitch that somehow affected the video's visibility. A case of one of those "i don't know why it wasn't working but seems alright now so..."

 

Thanks a bunch for going above and beyond helping me especially since I'm still heathen to the Codepen. I'll be sure to give it another go if I have any more questions. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...