css - 中心媒体 elements.js 视频

Question

您好，我有一个 mediaelements.js 视频，我想在其容器 div 中水平居中，这曾经有效，但我已经更改它以便视频响应。我也在 videoPlayerSlideWrap 上使用 Slick(它滑过许多 videoPlayerSlide div，虽然其中只有一个是视频，其余的是图像，图像本身完美居中)所以我不知道 slick 是否干扰了媒体元素。 js什么的。提前谢谢你。

玩家代码:

<div class="videoPlayerSlideWrap" id="contentSlide">

<div class="videoPlayerSlide">

    <video width="100%" height="100%" style="width:100%; height:100%;" controls id="player1" preload="auto">
        <source type="video/youtube" src="<?php print $storyMediaURL; ?>"/>
    </video>

</div>

</div>

CSS:

div.videoPlayerSlide {
    width:100%;
    min-width:580px;
    max-width:940px;
    height:529px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
}

div.videoPlayerSlideWrap.contentSlide {position:relative;}

div.videoPlayerSlideWrap {
    width:100%;
    height:529px;
    margin-top:0px;
    margin-left:0px;
    background:#000;
}

编辑:

问题的实时链接:http://www.umoja.org.uk/fullArticle.php?s=52

Answer 1

slick.js 之间存在冲突和你的 CSS 规则。将以下 CSS 规则添加到您的 main.css，这应该可以解决问题。

div.videoPlayerSlide.slick-slide {
   float:none;
}