무아지경

유튜브 동영상 반응형 본문

퍼블리싱/HTML5 + CSS3

유튜브 동영상 반응형

블리셔 2018. 7. 5. 11:43

유튜브 동영상 반응형 HTML + CSS



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    body { margin:0; padding:0; }
    .videoWrap { width:100%; max-width:100%; height:auto; }
    .videoWrap .videoArea { margin:0 auto; width:100%; max-width:640px; height:auto; }
    .videoWrap .videoArea { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
    .videoWrap .videoArea iframe, .videoWrap .videoArea object, .videoWrap .videoArea embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .videoWrap > h2 { font-size:17px; text-align:center; }
    .videoWrap > p { width:90%; color:#000; text-align:center; }
</style>
 
<div class="videoWrap">
    <h2>유튜브 동영상 반응형 hmtl+css</h2>
    <div class="videoArea">
        <iframe src="https://www.youtube.com/embed/-hdtrReY9Zw" allowfullscreen title="동영상" style="border:none;"></iframe>
    </div>
    <p>유튜브 동영상 반응형 hmtl+css</p>
</div>
cs


예제보기 ◀ 클릭

유튜브 동영상 반응형 hmtl+css

유튜브 동영상 반응형 hmtl+css

저작자표시 변경금지

'퍼블리싱 > HTML5 + CSS3' 카테고리의 다른 글

a링크 #none / javascript:void(0)  (0) 2018.07.13
window.open() 팝업창 띄우기  (0) 2018.07.05
border-radius  (0) 2018.05.30
button 디자인시 유의할 점  (0) 2018.05.30
mailto:...@..." (이메일/전화/문자 링크 걸기)  (0) 2018.05.30
'퍼블리싱/HTML5 + CSS3' Related Articles more
Comments