728x90
728x90
작업을 할 때 유튜브 영상을 팝업이나 링크로 연결시켜주는 경우가 많이 있습니다.
영상을 바로 가져와서 임베딩 할 수도 있지만 썸네일로 노출시키는 경우도 있습니다.
사용방법
사용방법은 간단합니다.
링크뒤에 id값을 넣고 0.jpg를 붙여서 주소값을 만들어줍니다.
ex) https://img.youtube.com/vi/ + id값 + /0.jpg
id값은 유튜브 영상 주소에 있는 코드값을 말하는데, 이 값은 영상마다 다릅니다. (참고사진)
적용예시
유튜브 썸네일을 적용해본 예시입니다.
https://img.youtube.com/vi/KGQEnx67lsU/0.jpg
검은 여백 문제
여백을 없애기 위해 css로 조절할 수도 있지만, 애초부터 여백없는 이미지를 가져오는것도 가능합니다.
이미지만 가져오시고싶은 분들은 아래와같이
0.jpg 대신 maxresdefault.jpg로 변경하시면 됩니다.
https://img.youtube.com/vi/ + id값 + /maxresdefault.jpg
반응형
'Code > Html' 카테고리의 다른 글
웹 성능을 올리는 방법 (Image Lazy Loading) (0) | 2023.01.04 |
---|---|
확장자 .htm과 .html의 차이점 (0) | 2023.01.04 |
영상 종료 후 이벤트가 발생하도록 구현하기 (0) | 2022.12.08 |
리다이렉트(Redirect)의 다양한 사용법과 정의 (0) | 2022.11.15 |
버튼 이벤트 없애기 (0) | 2022.11.14 |