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

iframe定位在窗口而不是div

1 个答案: