Centre mediaelements.js視頻

嗨我有一個mediaelements.js視頻，我想在它的容器div中水平居中，這用於工作，但我已將其更改爲視頻響應。我還在videoPlayerSlideWrap上使用Slick（它滑過許多videoPlayerSlide div，雖然其中只有一個是視頻，其餘的都是圖像，而且圖像完美），所以我不知道光滑是否會干擾mediaelements。 js什麼的。先謝謝你。Centre mediaelements.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

來源

2015-05-05 william205

在jsfiddle中提供示例很好。據我所知它工作得很好：http://jsfiddle.net/keryfw21/，做了一些改變，以確保它。你究竟想要集中什麼？包裝內的視頻？或者它裏面的包裝是主容器？ –

對不起，我目前沒有jsfiddle帳戶。 – william205

我想將包裝器放在其主容器中，這對於標準html5視頻播放器來說工作得很好，但是一旦mediaelements做了它的事情，播放器就會進入主容器的左側。 – william205

有slick.js之間的衝突你CSS規則。將以下CSS規則添加到main.css，這應該可以解決問題。

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

來源

2015-05-05 17:44:13

我需要最大寬度，因爲它不能超過940像素，但同時寬度：100％，即使它不會達到100％也是需要的，以便它能夠響應。不知道如何解決這個問題。 – william205

剛剛更新了我的答案。 –

它的工作原理！非常感謝，這一直在困擾着我整天。 – william205

Centre mediaelements.js視頻

回答

相關問題