Ad

Iframe Positioning On Window Not Div

- 1 answer

Im currently improving my Website www.herget.design. Therefore i use the CMS Koken (koken.me) which managing my content and is really code.

Now I want to add the functionality, that If you play video it willbe displayed all over the window. But my cms generates a list, that looks like:

<ul class="content-list">
<span class="k-infinite-load">
<li>
<span class="img-wrap">

<iframe class="k-custom-source" src="https://player.vimeo.com/video/141314866?username=1&assign_tag=1&tags=1&portrait=0&title=0&byline=0&autoplay=0&loop=0&color=d8d9da&api=1&player_id=koken_vimeo_49" width="1280" height="720" frameborder="0" title="Bootshaus Blackbox // CLUBBUSTERS 18.09.2015" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

            <span class="img-data">
                <!-- ......... -->
            </span>
</span>
</li>

My Problem is, that when I use the CSS to animate and scale the iFrame, it will be transofrmed only in its span/li. CSS:

Vimeo_Ani_IN {
    animation-fill-mode: forwards;  
    animation-name: VIMEO_IN;
    animation-duration: 1.5s;
}

.Vimeo_Ani_OUT {
     animation-name: VIMEO_OUT;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;  
}

@keyframes VIMEO_IN {
    0%   {}
    100% {
        position:relative;
        top: 10px;
        height: 80%; /* fallback if needed */
        height: calc(100% - 90px);
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60%;
        height: 40%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
}
@keyframes VIMEO_OUT {
    0%   {
        height: 100%;
        }
    100% {
    }
}

Has anybody ideas how to scale it to the window, without removing the CMS given structure and only manipulating the iframe? Of course it should be responsive.

Greetz and thanks to everybody who answears. Marius

Ad

Answer

Do the following:

/* This you may already have, just check first */
html, body{
  margin:0;
  padding:0;
}


/*Be careful with this. I suggest finding a specific class or parent instead of ALL LIs */
li{list-style-type:none;}

/* This gives you the full screen window   */

span.img-wrap {
   display: flex;
   width: 100%;
   height:100%;
}

span.img-wrap iframe {
   width: 100%;
}

Here is a working DEMO

Ad
source: stackoverflow.com
Ad