구글링하다가 찾았기 때문에 우선 출처 남깁니다.
http://kyouyoum.cafe24.com/archives/324
우선 css부분에
.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%;}
를 넣어줍니다.
그리고 youtube 공유 주소를 여기에 넣어줍니다.
<div class="video-container">
<iframe width="100%" src="//www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
홈페이지에 넣어주시면 잘동작 할겁니다.
예제 소스
<html>
<head>
<style>
.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%;}
</style>
</head>
<body>
<h1>테스트 페이지</h1>
<div class="video-container">
<iframe width="100%" src="http://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
youtube.html반응형입니다.
pc로 봤을때 크기
태블릿으로 봤을때 크기
모바일로 봤을때 크기
'Web > Reactive web' 카테고리의 다른 글
| 웹페이지 4분할, 8분할로 띄우는 화면 만들기 (0) | 2023.02.22 |
|---|---|
| html5 video mp4파일 ogv(ogg),webm파일로 변환하기 (2) | 2014.06.27 |
| html5 up 반응형웹 - Prologue (0) | 2014.06.27 |