將一個div與一個圖像放在另一個div頂部的嵌入式視頻

我想製作一個HTML頁面來循環播放列表的視頻與一些標籤對應的twitter消息疊加。將一個div與一個圖像放在另一個div頂部的嵌入式視頻

我以爲我可以讓它成爲一個網絡環境，所以我嘗試了將HTML和CSS結合起來。

我想要使它工作的方式是嵌入WMPlayer對象，寬度和高度均爲100％，並在該圖層的頂部放置另一個具有背景和一些PHP代碼的圖層以加載推文。

但它根本不起作用......不嘗試使用圖像，甚至只用文本進行嘗試。我認爲問題可能是無法在視頻的頂部放置任何東西，或者當然，我的代碼是錯誤的。

這就是：

html, body { 
    height: 100% 
} 

.video{ 
    width: 100%; 
    height: 100%;; 
    position: relative; 
    background: #0f0; 
} 
.tweets {  
    width:50%; 
    height:350px; 
    position: absolute; 
    top: 0; left: 0; 
    background: #f00; 
    z-index:100 
}

和HTML：

<div class="video"> 
      <OBJECT id="VIDEO" width="100%" height="100%" 
       CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 
       type="application/x-oleobject"> 
        <PARAM NAME="URL" VALUE="http://www.falange.es/videos/video.mp4"> 
       <PARAM NAME="SendPlayStateChangeEvents" VALUE="True"> 
       <PARAM NAME="AutoStart" VALUE="True"> 
       <PARAM name="uiMode" value="none"> 
       <PARAM name="PlayCount" value="9999"> 
       <PARAM name="WMode" value="opaque"> 
       <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
       name="mediaplayer1" autostart="true" width="100%" height="100%" transparentstart="1" SHOWSTATUSBAR="1" 
        loop="0" controller="true" src="http://www.falange.es/videos/video.mp4" stretchToFit="true" ></embed> 
      </OBJECT>  
      <div class="tweets"> 
       Tweets here. 
      </div>   
     </div>

我在做什麼錯？

非常感謝您提前。

來源

2012-06-15 Keyser Sozé

據我所知浮法：頂部是無效的CSS，並沒有做任何事情。你需要的是z-index – Huangism

你是對的。但是有或沒有「float：top」，它什麼也不做。我想我只是絕望，我嘗試了幾乎所有有關定位... 謝謝;） –

你必須給你的<body>比<div> 100％的高度將延伸到它 - http://jsfiddle.net/z5kGQ/

html, body { 
    height: 100%; 
} 

.video { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    background: beige; 
} 

.tweets { 
    width:100%; 
    min-height:150px; 
    position: absolute; 
    top: 0; 
    background: orange; 
}

來源

2012-06-15 14:19:25

它也工作。我發現我的問題是VLC插件。在IE和WMPlayer插件上它可以工作，雖然視頻 - 不是視頻對象 - 它總是處於頂端。非常感謝。 –

嘗試把的z-index：100例如在鳴叫DIV

.tweets { 
    z-index:100; 
    width:100%; 
    min-height:350px; 
    position: absolute; 
    background: url(img.png) top left no-repeat; 
}

從您的對象標籤中刪除樣式標籤，如果您可以提供帶有工作視頻和樣本文本的jsfiddle以覆蓋頂部，那就太好了。我有一種感覺的對象標籤會很難對付，當涉及到覆蓋着，但我不是100％肯定，直到我可以測試它

編輯 - 嘗試設置在對象標籤中的wmode =透明PARAMS

<PARAM name="WMode" value="transparent">

來源

2012-06-15 14:19:42 Huangism

與其他示例一樣，也可以在IE上使用WMPlayer插件，但無法疊加視頻。它覆蓋視頻層，而不是視頻本身。 –

@KeyserSozé看到我更新的答案 – Huangism

將一個div與一個圖像放在另一個div頂部的嵌入式視頻

回答

相關問題