div가 삽입 된 비디오가있는 다른 div 위에 놓습니다.

일부 태그에 해당하는 트위터 메시지 오버레이로 비디오 재생 목록을 반복하는 HTML 페이지를 만들려고합니다.div가 삽입 된 비디오가있는 다른 div 위에 놓습니다.

HTML과 CSS를 결합하여 웹 환경에서 만들 수 있다고 생각했습니다.

내가 작동하도록하는 방법은 100 % 너비와 높이의 WMPlayer 객체를 포함하고 그 레이어의 맨 위에 배경 및 일부 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- 인덱스 – Huangism

입니다. 그러나 "부유물"이 있건 없건간에 그것은 아무 것도하지 않습니다. 나는 단지 필사적이었고 나는 포지셔닝에 관한 거의 모든 것을 시도했다. ... 고마워;) –

당신은 그것을 스트레칭됩니다 <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 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 % 확실하지 않다 -

PARAMS 개체 태그의 W 모드 = 투명 설정하십시오

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

출처

2012-06-15 14:19:42 Huangism

다른 예제로 WMPlayer pluging을 사용하는 IE에서도 작동하지만 비디오를 오버레이 할 수는 없습니다. 비디오 레이어는 오버레이되지만 비디오는 오버레이되지 않습니다. –

@ KeyserSozé 내 업데이트 된 답변보기 – Huangism

div가 삽입 된 비디오가있는 다른 div 위에 놓습니다.

답변

관련 문제