css | 반응형 아이프레임

페이지 정보

작성자 madalla 작성일18-02-20 20:15 조회1,771회 댓글0건

본문

@media screen and (max-width: 600px) {
#content-view iframe { width: 100%; height: 200px; }
}

유투브

<style>
.video-container { 
    margin: 0;
    padding-bottom: 75%; 
    max-width: 100%; 
    height: 0;  
    position: relative;
    overflow: hidden;
} 
.video-container iframe, 
.video-container object,
.video-container embed {
    margin: 0;
    padding: 0;  
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0; 
}
</style>
 
<div class="video-container">
    <iframe ~~~></iframe>
</div>