Iframe fadeIn ()

Question

Iframe fadeIn ()

Navigation

#1 by (0 votes)

1

Hi, I have an image and a video in the same position with different z-index value. I want to do fadeOut in the image and at the same time fadeIn the video to make a sort of dissolve effect. I can not get the fadeIn () applied to the iframe that contains the video.

HTML

<div class="imagen-video"></div>

<iframe class="videoContainer__video" src="https://www.youtube.com/embed/Ha2f8zU3QP0?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=1&disablekb=1&iv_load_policy=0" frameborder="0"></iframe>

CSS

.imagen-video{
  background-image: url("../images/img-video.jpg");
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
}

iframe {
  /* optional */
  width: 100%;
  height: 100%; 
  z-index: 0;
  position: absolute;
  visibility: hidden;
}

JQUERY

$(document).ready(function () {
    setTimeout(function(){
        $('.imagen-video').fadeOut(500);
    }, 2500);

    setTimeout(function(){
        $('.videoContainer__video').fadeIn(500);
    },2500);
});

jquery iframe

asked by Jmainol 19.03.2018 в 23:16

source

1 answer

how to show a list with a master structure-detail MVC Decode chain sent from GPS GT02A to a server

score 0 · Accepted Answer

The problem is the visibility: hidden of your iframe . fadeIn does not change the property visibility . According to the documentation of jQuery fadeIn and show are the equivalent to css('display','block') so in your case it would not affect visibility and would remain hidden.

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css ("display", "block"), except that the display property is restored to whatever it was initially If an element has a display value of inline, then it is hidden and shown, it will be once again shown inline.

The difference between visibility:hidden and display:none is that visibility:hidden , although it is not displayed, continues to occupy the screen space. Here more info: link

You have several options to fix it:

1.- Change visibility:hidden by display: none

2.- Change the attribute visibility to visible with css $(".videoContainer__video").css('visibility', 'visible'); You would have to apply an animation later.

3.- If you want to keep the space occupied by iframe , change the property visibilty first, then hide it with hide and then show it

$('.videoContainer__video').css('visibility','visible').hide().fadeIn(500);

I leave you the fiddle with the first option: link