html css, youtube iframe responsive > 개발

사이트 내 전체검색

개발

html css, youtube iframe responsive

페이지 정보

작성자 관리자 (112.♡.173.204)
댓글 0건 조회 1,587회 작성일 22-02-03 13:38

본문

CSS
```
.youtube-video-wrapper {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.youtube-video-wrapper iframe, .youtube-video-wrapper object, .youtube-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}
```

HTML
```
<div class="youtube-video-wrapper"><iframe src="https://www.youtube.com/embed/WMweEpGlu_U?rel=0" frameborder="0"></iframe></div>
```

## 참고
https://avexdesigns.com/blog/responsive-youtube-embed
https://stackoverflow.com/questions/52393814/css-100-width-of-youtube-embed-video

추천0

댓글목록

등록된 댓글이 없습니다.

개발 목록
번호	제목	조회	날짜
346	Windows 10 , 11 에서 작업표시줄 미리보기 비활성화하기 끄기	3075	06-15
345	PHP simple html dom 에서 find 로 여러 class 명을 한꺼번에 선택하기 multiple	1701	05-04
344	HTTP 상태 코드 http status code 301 302 차이	1454	03-11
343	그누보드 데이터를 json 으로 내보내고, javascript 에서 사용하기	1911	03-04
342	OpenLayers 오픈레이어에서 좌표값 변환	1846	02-21
341	http referer 정보 숨기기	1992	02-20
340	SFTP 에서 상위 디렉토리(폴더) 접근 제한 - 미완성 문서	2191	02-18
339	javascript 함수 순차적 실행 방법, 동기화 지연 등등	1719	02-15
338	gnuboard 스크립트 실행 소요시간 측정 방법 및 유의사항	1552	02-13
337	phpMyAdmin 에서 mysql view 생성(create) 수정(edit) 삭제(drop) 방법	2015	02-08
336	다음 카카오 맵 파라미터 들	1563	02-08
열람중	html css, youtube iframe responsive	1588	02-03
334	css three dots button menu 삼점 버튼 메뉴 만들기	1513	01-31
333	jquery 특정 요소에 포커스 없애기 focus blur	2581	01-29
332	javascript 키보드 이벤트 keydown keyup 를 위한 addEventListener 사용법	1537	01-28
331	PHP 에서 배열 선언시 array() 와 [] 의 차이점	1417	01-13
330	PHP 에서 boolean 변수의 값 true false 를 echo 로 그대로 찍는 방법	1660	12-23
329	gnuboard 그누보드 5 에서의 특이한 함수들	2305	12-20
328	Android WebView 에서 가로 세로 Rotate 전환시에 웹뷰가 새로고침 되는 현상	4344	05-19
327	jQuery The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0	3572	05-15

개발 목록

번호

제목

조회

추천

날짜

346

Windows 10 , 11 에서 작업표시줄 미리보기 비활성화하기 끄기

3075

06-15

345

PHP simple html dom 에서 find 로 여러 class 명을 한꺼번에 선택하기 multiple

1701

05-04

344

HTTP 상태 코드 http status code 301 302 차이

1454

03-11

343

그누보드 데이터를 json 으로 내보내고, javascript 에서 사용하기

1911

03-04

342

OpenLayers 오픈레이어에서 좌표값 변환

1846

02-21

341

http referer 정보 숨기기

1992

02-20

340

SFTP 에서 상위 디렉토리(폴더) 접근 제한 - 미완성 문서

2191

02-18

339

javascript 함수 순차적 실행 방법, 동기화 지연 등등

1719

02-15

338

gnuboard 스크립트 실행 소요시간 측정 방법 및 유의사항

1552

02-13

337

phpMyAdmin 에서 mysql view 생성(create) 수정(edit) 삭제(drop) 방법

2015

02-08

336

다음 카카오 맵 파라미터 들

1563

02-08

열람중

html css, youtube iframe responsive

1588

02-03

334

css three dots button menu 삼점 버튼 메뉴 만들기

1513

01-31

333

jquery 특정 요소에 포커스 없애기 focus blur

2581

01-29

332

javascript 키보드 이벤트 keydown keyup 를 위한 addEventListener 사용법

1537

01-28

331

PHP 에서 배열 선언시 array() 와 [] 의 차이점

1417

01-13

330

PHP 에서 boolean 변수의 값 true false 를 echo 로 그대로 찍는 방법

1660

12-23

329

gnuboard 그누보드 5 에서의 특이한 함수들

2305

12-20

328

Android WebView 에서 가로 세로 Rotate 전환시에 웹뷰가 새로고침 되는 현상

4344

05-19

327

jQuery The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0

3572

05-15

1		범죄도시4	1,048,337
2		쿵푸팬더4	45,455
3		파묘	8,825
4		챌린저스	5,571
5		남은 인생 10년	5,442
6		몬스터 프렌즈	2,037
7		레옹	678
8		여행자의 필요	619
9	3	땅에 쓰는 시	559
10	1	듄: 파트2	546