유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기
*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..
아이프레임(iframe)이란?
아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다. " 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. " HTML // 문법 // 예시 유튜브 iframe API 사용 예제 iframe을 지원하지 않는 브라우저입니다. noframes 요소는 해당 브라우저가 iframe 요소를 지원하지 않을 때 보여지는 문자열을 저장합니다. iframe 속성 - src : 삽입 할 홈페이지 url - name : 프레임 이름 - width : 프레임 가로 너비 - height : 프레임 세로 길이 - frameborder : 프레임 테두리 선 (..
유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기 가로 세로 비율을 이용하여 스타일을 적용하는 방법입니다. html css .wrap{ width:500px; } .content{ position:relative; padding-top:56%; width:100%; } iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } 적용 사항은 아래와 같습니다.