Поместите div с изображением поверх другого div с вложенным видео

Я пытаюсь создать HTML-страницу для создания списка воспроизведения видео с оверлейными твиттер-сообщениями, соответствующими некоторому тегу.Поместите 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é

Насколько я знаю, float: top недействителен css и ничего не делает. вам нужен z-index – Huangism

Вы правы. Но с или без «float: top» он ничего не делает. Наверное, я был просто в отчаянии, и я почти ничего не делал с позиционированием ... Спасибо;) –

Вы должны дать свой <body> высоту 100%, чем <div> протянет к нему - 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 Plugin он работает, хотя видео - не видео-объект - он всегда на высоте. спасибо. –

Попробуйте положить Z-индекс: 100, например, на твит DIV

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

удалить тег стиля для вашего тега объекта, было бы хорошо, если бы вы могли предоставить jsfiddle рабочим видео и образцом для наложения сверху. У меня есть чувство, что объект тег будет трудно иметь дело с тем, когда речь идет о накладках, но я не уверен на 100%, пока я не могу проверить это

Edit - Попробуйте поставить режим окна = прозрачны в теге объекта PARAMS

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

источник

2012-06-15 14:19:42 Huangism

Как и в других примерах, также работайте с IE с подключением WMPlayer, но невозможно наложить видео. Он накладывает слой видео, но не сам по себе. –

@ KeyserSozé см. Мой обновленный ответ – Huangism

Поместите div с изображением поверх другого div с вложенным видео

ответ

Смежные вопросы