iframe full size & responsive

[vernandel]

hi there,
i want to create a landingpage with an iframe.
it should be full size & responsive.
it is working at a regular html site:
http://klubberlin.de/COOKIESWORLD.html

when i use the same coding in laytheme the i frame is too big. you can see it that the logo (left top "COOKIESWORLD") and after click the play button the menu at bottom is missing:
https://360style.de/test_wrapper-copy/

this is the code i used:

.video-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 0;
overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

<div class="video-wrapper">
<iframe width="100%" height="100%" src="https://my.mpskin.com/de/tour/2znh24ebh" frameborder="0" allowfullscreen></iframe>
</div>

could you please help me with this
thank you
g.

[arminunruh]

i see!

try this css instead:

.video-container2 {
    position: relative;
    padding-bottom: 100vh;
    overflow: hidden;
}
.video-container2 iframe,
.video-container2 object,
.video-container2 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

[vernandel]

@arminunruh
THANK YOU! GREAT:
https://360style.de/video-wrapper/

jut 1 more thing:
how to get ridd of the scrollbar on the right? there is nothing to scroll...

all the best
g

[arminunruh]

html {
overflow-y: auto;
}

[vernandel]

@arminunruh
hi armin, thank so so far.
i still have the same problem with the mobile version. (https://360style.de/cookiesworld/) part of the logo is cut off, do you know why?

also in the mobile version same url:
https://360style.de/cookiesworld/

if click on the iframe button it opens a new window. i would like to have it in the same window. i cant find a documentary with iframes.

thank you so much
götz

[vernandel]

@arminunruh

hey, did you see my last post/question?
thank you
g.

[arminunruh]

use this css instead:

.video-wrapper {
position: relative;
padding-bottom: 100svh;
overflow: hidden;
}

.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100svh;
}

the difference is we dont use vh, but we use svh

so anywhere you used 100vh, just use 100svh
i see i posted some css for you to use here, but i think you may have also used some of your own css, so the gist of it is change your css to use 100svh instead of 100vh anywhere you see 100vh

if click on the iframe button it opens a new window. i would like to have it in the same window. i cant find a documentary with iframes.

i think this should work in the same window. this might be an issue with the website you are embedding with the iframe