iframe 在窗口而不是 div 上的定位

Question

我目前正在改进我的网站 www.herget.design。因此我使用 CMS Koken (koken.me) 来管理我的内容并且是真正的代码。

现在我想添加功能，如果您播放视频，它将显示在整个窗口中。但是我的 cms 会生成一个列表，如下所示：

<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>

我的问题是，当我使用 CSS 为 iFrame 设置动画和缩放时，它只会在其 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% {
    }
}

有没有人知道如何将其缩放到窗口，而不删除 CMS 给定结构并且只操作 iframe？当然应该是响应式的。

Greetz 并感谢所有回答的人。 马吕斯

Answer 1

执行以下操作：

/* 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%;
}

这是一个有效的DEMO