Iframe not working when offscreen or hidden

[jemz]

Hi, can I ask some help please, it’s been 1 week I’ve battling to solve this issue.

I am using this multistep form, but in step 3 social info I add Iframe but unfortunately it did not show only black screen here is my CodePen, if you directly paste to browser the src the content is working.

Thank you in advance.

[PaulOB]

What if you just hide it off screen instead.

e.g.

    .form-container:nth-child(3){
    display:block!important;
    position:absolute;
    left:-200vw;
  }
  .form-container.active:nth-child(3){
    left:auto;
    position:relative;
  }

[jemz]

Thank you so much Paul

[jemz]

Hi Paul,

Can I ask some help please. I encountered problem. if I put the video on the div with the class mymedia

It will not work here is my codepen

[PaulOB]

The original problem was that the iframe wouldn’t load when it was display:none. I gave you a fix by hiding the container off screen instead.

In your new code you have once again hidden the container with display:none. The fact that you try and set a child iframe to display:block has no effect when its parent is display:none.

You just need to do what I said originally but add a width to make it hide completely.

   .form-container:nth-child(3) {
   display:block!important;
   position:absolute;
   left:-200vw;
     width:100%;
   }
   .form-container.active:nth-child(3) {
   left:auto;
   position:relative;
   }

[rpg_digital]

For what it’s worth I had forked the codepen just to do a bit of a tidy up and figure out what was what. Here it is with Paul’s amendment.

[jemz]

@PaulOB

width:100%;

Thank you it works now I will try to use class also instead of nth-child(3) because the form steps are dynamically added it reaches 10 and sometimes in steps I will have 2 videos and some paragraphs. Thank you again… I will be back if I get in trouble

[PaulOB]

@jemz

will try to use class also instead of nth-child(3)

You could use my routine for all the form panels I believe. I’m not on a computer to test at the moment but I don’t see why it wouldn’t work. It just means that all are hidden off screen rather than display none.