유튜브 반응형 깔끔하게 보기
아래처럼 스타일에서 클래스를 2개 만들고 normalPlayer 를 아이프레임에 주면 일반적인 반응형 유튜브 동영상이 만들어집니다.
<style>
#mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
.normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
.cutPlayer { position:absolute; top:-100%; left:0px; width:100%; height:300%; display:block; }
</style>
<div id=mediaPlayer><iframe class=normalPlayer src=https://www.youtube.com/embed/T2ZNOZmdD-E?autoplay=1 frameborder=0 allowfullscreen></iframe></div>
----------
아래처럼 cutPlayer 를 아이프레임에 주면 상단의 타이틀과 하단의 광고부분이 잘려나간 깔끔한 영상을 볼 수 있습니다. 동영상 자체가 온오프 버튼이 되겠죠.
<style>
#mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
.normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
.cutPlayer { position:absolute; top:-50%; left:0px; width:100%; height:200%; display:block; }
</style>
<div id=mediaPlayer><iframe class=cutPlayer src=https://www.youtube.com/embed/T2ZNOZmdD-E?autoplay=1 frameborder=0 allowfullscreen></iframe></div>
-----------
단 하단의 타이머나 트랙바, 볼륨바, 풀스크린버튼이 같이 잘려나갑니다.
그것이 필요한 경우에는 유튜브 API 를 사용하여 직접 만들어 써야 합니다.ㅜㅠ
예제는 리자님 동영상입니다.
예제 - http://www.mediaplayer.kr/main/tip/10
댓글 24개
https://getbootstrap.com/docs/4.5/utilities/embed/
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
감사합니다~~
시간이랑 풀스크린 버튼은 있었으면~~좋겠어요
감사합니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4427 | ||
| 2694 | 2개월 전 | 197 | ||
| 2693 | 2개월 전 | 155 | ||
| 2692 | 2개월 전 | 163 | ||
| 2691 | 2개월 전 | 178 | ||
| 2690 | 2개월 전 | 330 | ||
| 2689 | 2개월 전 | 241 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 444 | |
| 2687 | 2개월 전 | 297 | ||
| 2686 |
선택과집중
|
2개월 전 | 334 | |
| 2685 | 2개월 전 | 296 | ||
| 2684 | 2개월 전 | 356 | ||
| 2683 | 3개월 전 | 487 | ||
| 2682 | 3개월 전 | 281 | ||
| 2681 | 3개월 전 | 306 | ||
| 2680 |
선택과집중
|
3개월 전 | 279 | |
| 2679 | 3개월 전 | 334 | ||
| 2678 |
 Xenon54 |
3개월 전 | 432 | |
| 2677 |
Xenon54 |
3개월 전 | 505 | |
| 2676 | 3개월 전 | 331 | ||
| 2675 | 3개월 전 | 308 | ||
| 2674 |
선택과집중
|
3개월 전 | 483 | |
| 2673 |
 ideaman |
3개월 전 | 324 | |
| 2672 | 3개월 전 | 341 | ||
| 2671 | 3개월 전 | 288 | ||
| 2670 | 3개월 전 | 264 | ||
| 2669 | 3개월 전 | 377 | ||
| 2668 | 3개월 전 | 293 | ||
| 2667 |
선택과집중
|
3개월 전 | 489 | |
| 2666 |
선택과집중
|
3개월 전 | 473 | |
| 2665 |
선택과집중
|
3개월 전 | 412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기