css 및 html로 이미지 위에 비디오 삽입하기

Question

내 웹 사이트에 그래픽을 만들려는데 http://176.32.230.43/testdigitalmarketingmentor.co.uk/ 비디오가 랩톱 사진 내에서 재생되는 곳입니다 (비디오가 랩톱에서 재생되는 것처럼 보입니다). 화면). 또한 모바일 반응 (화면 크기에 따라 다시 크기 조정)을 원합니다. "Showreel"로 스크롤하여 아래의 CSS와 HTML로 지금까지 내가 무엇을 관리했는지 볼 수 있습니다 ... 어떤 도움/조언 /지도도 감사하겠습니다!

#laptop-panel { 
 
     position: relative; 
 
     width: auto; 
 
     height: 625px; 
 
     overflow: hidden; 
 
    } 
 

 
    #laptop-panel-tv { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     background: url('http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png') no-repeat center; 
 
    z-index: 10; 
 
    } 
 

 
    #laptop-panel-content-overlay { 
 
     position: absolute; 
 
     top: 70px; 
 
     width: 100%; 
 
     height: 444px; 
 
     z-index: 12; 
 

 
    .embed-container { 
 
     position: relative; 
 
     padding-bottom: 56.25%; 
 
     padding-top: 30px; 
 
     height: 0; 
 
     overflow: hidden; 
 
     max-width: 100%; 
 
     height: auto; 
 
     } 
 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; height: 0; overflow: hidden; 
 
} 
 
    
 
.video-container iframe, 
 
.video-container object, 
 
.video-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="laptop-panel"> 
 
    <div id="laptop-panel-tv"></div> 
 
    <div id="laptop-panel-content-overlay"> 
 
    <div id="laptop-panel-content"> 
 
     <div class="embed-container"> 
 
     <div style="width: 683px; " class="wp-video"> 
 
<!--[if lt IE 9]> <script>document.createElement('video');</script><![endif]--> 
 

 
    <div class="video-container"> 
 
<iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 
 
    </div></div></div>    
 
    </div> 
 
</div>

Answer 1

당신은 같은 것을 사용 괜찮을까요? 또한 YouTube에서 더 많은 조회수를 얻는 데 도움이됩니다. 코딩

#laptop-panel { 
 
     position: relative; 
 
     padding-top: 25px; 
 
     padding-bottom: 67.5%; 
 
     height: 0; 
 
    } 
 
    #laptop-panel iframe { 
 
     box-sizing: border-box; 
 
     background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png) center center no-repeat; 
 
     background-size: contain; 
 
     padding: 11.7% 17.9% 15.4%; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
    }

<div id="laptop-panel"> 
 
     <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 
 
    </div>

해피!