Notice
Recent Posts
Recent Comments
Tags more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] Youtube 태그 반응형 모바일 너비에 맞게 넣기 본문

웹퍼블리싱/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

 

참고 : https://code-study.tistory.com/35

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS] 모바일 해상도에 따른 최대치로 지정  (0) 2023.10.17
[CSS] 모달창 기본소스  (0) 2023.08.21
[CSS] 말풍선 , 툴팁 기능 구현 ToolTip  (0) 2023.01.21
[CSS] 긴줄을 말줄임 표시하기  (0) 2023.01.17
[CSS] 네이버 스마트 에디터 이미지 추가시 반응형 이미지 형태로 수정하기 (max-width 값 먹이기)  (0) 2021.11.05
'웹퍼블리싱/CSS' Related Articles more
Comments