您好,我有一个 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;
}
编辑:
最佳答案
slick.js 之间存在冲突和你的 CSS 规则。将以下 CSS 规则添加到您的 main.css
,这应该可以解决问题。
div.videoPlayerSlide.slick-slide {
float:none;
}
关于css - 中心媒体 elements.js 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30059232/