웹관련/Youtube-유투브3 [반응형] 유투브 반응형으로 넣는방법 유투브 영상을 반응형 코드에 맞게 화면을 줄였을때비율에 맞게 줄어들게 하려면 아래와 같이 코드를 작성하면 된다. HTML 코드 부분 CSS 코드 부분 .video-container { position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0; } .video-container > iframe { position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 CSS 비율 퍼센트가 중요한데 비율은 아래와 같다16:9 = 56.25%4:3 = 75% 이부분만 잘 이용하면 유투브 영상도 반응형으로 넣을수 있다 2019. 8. 20. [유투브 동영상] 썸네일 추출방법 유투브는 YouTube Data API를 통해 유투브 동영상에 대한 각종 정보와 쎔네일을 제공하고 있습니다. 문서에 삽입된 동영상의 썸네일이 필요한 경우가 있어 이 내용을 정리합니다. 일반적인 YouTube 소스를 긁어오면 아래와 같이 소스를 가져올수 있습니다.아래소스에서 빨간색 부분이 동영상의 고유 ID값이 됩니다. 동영상 썸네일을 가져오는 고유의 주소는 아래와 같습니다. http://img.youtube.com/vi/[동영상 ID값]/[이미지형식].jpghttp://i.ytimg.com/vi/[동영상 ID값]/[이미지형식].jpg 여기서 i.ytimg.com 이부분은 짧은 주소라서 둘중에 어느것을 사용해도 문제없습니다. - 유투브 이미지 형식 - 동영상 배경 썸네일(480x360) : 0.jpghtt.. 2017. 6. 8. [HTML] 유투브 재생관련 파라메타 유튜브 동영상 재생 옵션 설정하기 일단 유튜브 동영상 재생의 기본적인 옵션들은 아래와 같으며, 사용법은 고유주소 뒤에 원하는 옵션들을 그대로 이어붙이면 됩니다. [동영상 반복 재생 옵션은 따로 설명이 필요하기 때문에 뒤에서 설명합니다.] ▶ 동영상 재생 화질 설정 : vq동영상의 재생 화질을 설정합니다. 단! 동영상이 해당 화질을 지원해야 합니다. 생략하면 기본 360p(medium) 으로 재생합니다. 240p 화질로 재생 &vq=light 360p 화질로 재생 &vq=medium 480p 화질로 재생 &vq=large 720p 화질로 재생 &vq=hd720 1080p 화질로 재생 &vq=hd1080 ▶ 동영상 자동 재생 여부 설정 : autoplay사용자가 재생 버튼을 클릭하지 않아도 동영상을 자동으로.. 2016. 9. 23. 이전 1 다음
