웹퍼블리싱/CSS
[CSS] Youtube 태그 반응형 모바일 너비에 맞게 넣기
http://portfolio.wonpaper.net
2023. 1. 26. 12:02
Youtube 태그를 반응형 소스 상에 삽입할때 모바일 형태로 적절히 리사이징 되어 화면에 보기 좋게 나타나도록 해 준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}
</style>
<div class="video-wrap">
<iframe width="100%" height="384" src="https://www.youtube.com/embed/<?=$youtube1?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<style type="text/css">
.video-container {
position:relative;
height:0;
padding-bottom:56.25%;
}
.video-container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<?=$youtube?>" title="YouTube video player" frameborder="0" allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
|
cs |