HTML 다른 이미지를 기준으로 객체의 위치를 ​​변경하는 방법

Question

내 웹 사이트의 경우 화면을 보여주는 이미지가 있습니다. 그 화면 안에 embeded youtube 비디오를 그 화면 안에 옮겼습니다. 그래서 임베드는 이미지 위에 있습니다. 나는이를 사용하여 올바른 위치에 임베디드 비디오를 얻을 수 있습니다 :

<div style="position:relative"> 
    <img src="screen.png" /> 
    <div style="position:absolute; left:0px;top:0px;">  
    <embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>   
    </div> 
</div> 

은 그때 분명히 아무것도 때문에 위치의 중심에없는 내가 태그이를 둘러싸고 그러나 경우, 전체 것은 중앙에 할; 삽입은 이미지의 왼쪽이 아니라 창 왼쪽에서 544로 유지됩니다. 위치를 중심으로 한 이미지와 일치하도록 퍼가기 이동을 만드는 방법이 있습니까?

(NB : 모든 스타일에 대해 별도의 CSS 문서를 사용해야한다는 것을 알고 있지만 지금 당장은별로 관심이 없습니다. 그런 다음 스타일을 별도로 캡슐화 할 수 있습니다.

Answer 1

이

<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;"> 
    <img src="screen.png"> 
    <div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;"> 
    <embed width="425" height="349" allowfullscreen="true&quot;" src="http://www.youtube.com/embed/qoSEzTpbxP4">   
    </div> 
</div> 

Answer 2

이 ... 좋아 보이는 비디오 프레임을 시도하려고) 나중에 배치!

<object height="360" width="580" id="video_MT6UDIruUkU" type="application/x-shockwave-flash" 
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"> 

    <param value="always" name="allowScriptAccess"> 
    <param value="transparent" name="wmode"> 
    <param value="video_id=MT6UDIruUkU&playerapiid=MT6UDIruUkU" 
    name="flashvars"> 
    <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3" 
    name="movie"> 

</object> 

<div class="controlDiv play"></div>