Want to make my product landing page's iframe responsive

hello everyone, i have completed my product landing page but there is one problem, I have added a iframe in my landing page and that iframe is not responding according to the screen size, on less than 677px screen size the content of iframe starts hiding, can anyone give solution of this?

Product Landing Page

try this

iframe {
    margin-top: 3.6em;
    /*height: 36rem;*/
  width: 100%;
}

and remove the width setting in the html as that is not good practice

1 Like

I have tried this, but still it is not working

works for me (here’s a fork of your pen)

1 Like

but now the upper part of the video is hiding

here it is fixed

If you need more info on what I changed read this:
https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

but with shrinking screen size the iframe getting disappear, i want full height in mobile view

Look it’s still not working

is this the effect you are going for?

1 Like

Look this is the minimum width what I am getting from my pc, but still, it is not as responsive as i want, you can see in the word “Excuses” character “E” is still hidden :disappointed_relieved::disappointed_relieved:

thank a lot for all your help :slightly_smiling_face:

ok, look again? maybe this is what you wanted. All I’m doing is playing around with the max/min height/widths…

yes this what i want :slightly_smiling_face: but why you have given 97vw? i do not want any empty space, one more thing my about us heading is now also hidden

I was just playing with the sizes because I noticed your page has some horizontal scroll.
Whenever there is unexplained horizontal scroll you have to investigate all the elements to see which one is causing it.

1 Like

so what is the reason behind horizontal scroll, that 100vw ?

you’ll have to investigate that by removing all the elements and then adding them in one by one till you find the culprit.

as for the hidden about us, I think you should probably go back and figure out a layout strategy for the page.
I had to use flex to handle the video issue (on the body) but you should probably think how to lay out all the remaining items.

1 Like

that mean i have to again create the page from scratch?

do you mean to investigate the horizontal scroll? No. Just fork the page and delete all the html and then slowly add it back in (copy and paste should help you do it fast). You’ll discover the culprit and can fix the issue in the old codepen.

As for layout, I can’t comment because I have only looked at your video section.
For myself, I like to work in sections. Once I have one section working, I add the next. That way I am not stuck with handling alignment and problems that are ‘legacy’ from the previous section I was working on mixing up with the new section. etc.

1 Like

ps. I fixed the disappearing About Us by adding a margin-bottom to the video

2 Likes

Great stuff @hbar1st, and @naveen_coder, great that you’re working on iframes, because I plan to add iframes to an old project pretty soon, and I will need to make it responsive too haha

1 Like

:smile::smile: it’s always great to take help from your seniors @hbar1st helped me a lot

1 Like