주요) 유튜브 iframe 동영상 추가시 사용 가능한 매개변수 및 방법
관련 글. API 를 이용해 영상을 삽입하는 방법에 대한 안내
유튜브 API 를 이용해 영상 삽입 스크립트 샘플
—-
유튜브의 영상을 판매용도의 상세페이지에 첨부하거나 사이트에 첨부하는 경우가 많다.
유튜브 영상 수요가 매우 늘어나는 만큼 그 활용방법도 가지각색일텐데 이에대해서 깔끔하게 정리된 글이 없어서 작성한다.
글은 20년 01월 27일 작성 기준이며,
만약 예시화면이 설명과 동일하지 않다면 유튜브에서 매개변수를 삭제하거나 변칙을 준 것이므로 참고하길 바란다.
모든 예시는 주식회사 샐러드랩이 생산하여 판매 중인 “노란통연고” 제품을 예시로 작성한다.
예시 화면은 카페24 일반 쇼핑몰 솔루션을 사용하였다.
또한 텍스트를 넣기 너무 길어 모든 예시는 코드펜을 이용해 첨부한다.
본 글은 초보자를 위한 글이 아니며, 기본적인 html 구조는 이해하고 있어야지 글을 이해할 수 있다.
1. 사이즈에 따라 반응형으로 작동하는 유튜브 영상
유튜브 영상을 공유하기 버튼에서 그대로 퍼가면 모바일에서 아래 이미지처럼 가로가 잘린다.
이를 방지하기 위해서는 첨부하는 영상을 화면의 가로 길이에 따라 반응하여 사이즈가 바뀌도록 첨부해야한다.
1.
우선 아래 링크로 들어가서,
가이드가 될 스크립트 전체를 복사해서 영상을 추가할 위치에 HTML 양식으로 그대로 얹는다.
//codepen.io/febreast/pen/dyPrLxG 적용 사례 보기
2.
그 다음, 위 링크로 들어가 전체 HTML 가이드 스크립트 중
최하단에 아래처럼 생긴 부분을 찾아낸다.
src=”//www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1″
3.
위 부분을 찾아냈으면,
내가 첨부하고자하는 영상의 링크주소에서 ‘ v= ‘ 뒤의 영상 고유텍스트로
대치한다.
4.
이제 영상의 가로세로 비율이 어떻게 되는지 전달해야한다.
링크의 고유텍스트를 대치해서 삽입한 스크립트의 윗줄에 보면
아래처럼 생긴 스크립트가 있다.
<div class=”youtubevideowrapperdiv youtubevideowrapperdiv20-9” >
위 처럼 적힌 부분의 빨간 텍스트 숫자에 비율을 적어주면된다.
예를 들어 1:1 비율의 영상이라면 youtubevideowrapperdiv1-1 로
16:9 비율의 영상이라면 youtubevideowrapperdiv16-9 로 반영하면 된다.
그렇게하면 아래 링크처럼 가로 최대 길이는 고정되고 가운데 정렬되면서 모바일에서는 가로로 꽉차는 유튜브 동영상이 추가된다.
//m.saladlab.shop/product/%EC%8C%8D%EC%BB%A4%ED%92%80-%ED%9D%89%ED%84%B0-%EB%B0%8F-%EA%B0%81%EC%A2%85-%ED%9D%89%ED%84%B0-%EC%99%84%ED%99%94-%EB%85%B8%EB%9E%80%ED%86%B5-%EC%97%B0%EA%B3%A0%ED%81%AC%EB%A6%BC/11/category/1/display/2/
2. 들어가자마자 자동으로 동영상이 재생되게 하는 방법
유튜브는 영상이 로드되자마자 자동으로 재생될 수 있도록 매개변수라는 것을 만들어 두었다.
//developers.google.com/youtube/player_parameters#showinfo
위 링크에선 모든 매게변수를 확인할 수 있다.
<a href=”//codepen.io/febreast/pen/dyPrLxG” target=”_blank”>//codepen.io/febreast/pen/dyPrLxG</a>
위 가이드 링크에서
src=”//www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1″
라고 적힌 영상링크를
src=”//www.youtube.com/embed/QpRigsf1CZg?rel=0&modestbranding=1&autoplay=1”
로 바꾼다면 자동재생된다.
구글에서 말하는 매개변수란 일반적인 링크 뒤에 추가적으로 붙는 링크-파라미터를 말한다.
3. 제목 없애는 방법
원래 유튜브는 제목을 없애는 매개변수를 제공하였다.
이 방법을 18년까진 분명 잘 썼었는데,
유튜브에서 19년 들어 정책을 바꾸는 바람에 기존에 매개변수로 제목을 없애 적용해두었던 모든 웹사이트가
제목이 다시 발생하게 되었다.
그래서 제목을 가리기 위해선 영상화면 사이즈를 조절하고 위 아래에 하얀색 사각형을 추가로 얹어서 가려줘야 한다.
이 부분은 난이도가 있어서 초보자는 따라하기 어려울 것 같다.
그래서 해당 텍스트를 이해할 수 있는 사람을 위해서만 설명하도록 하겠다.
가이드 링크에 들어가서 스크립트를 복사한 뒤,
<a href=”//codepen.io/febreast/pen/dyPrLxG” target=”_blank”>//codepen.io/febreast/pen/dyPrLxG</a>
<!– 제목 가리는 div–>
<div
style=”position:absolute;background-color:white;width:100%;height:140px;z-index:99999″></div>
<!–//제목 가리는 div–>
라는 스크립트를 각 영상의 iframe 위에 올린다.
그러면 영상 위에 흰색 배경이 얹혀져서 가려진다.
영상의 세로 길이는 .youtubevideowrapperdiv4-3 같은 클래스로 조정하고
흰색바의 위치는 제목 가리는 div 의 포지셔닝을 조정하면 된다.
흰색바의 크기는 height 의 크기를 조정하면 된다.
//codepen.io/febreast/pen/dyPrLxG 적용 사례 보기
본 글은 클라이언트를 위한 정보공유 글로 클라이언트가 아닌 사람들의 글 관련 전화,메일 문의 답변 사절합니다.
주식회사 샐러드랩
서울특별시 강남구 도곡로 173, 6층
스튜디오엠엑스 | 알파리뷰 | 에스크비 | 세이렌라운지 | 트렌디스
Home » 워드프레스 기본 » 유튜브 영상 자동 재생되도록 삽입하는 방법
유튜브 영상 자동 재생되도록 삽입하는 방법
Last Updated: 2022년 10월 26일 | 8개 댓글
유튜브 영상을 워드프레스나 블로그에 삽입할 때 자동 재생되도록 하고 싶은 경우 이 글에 소개하는 방법으로 YouTube 영상 임베드
코드를 삽입할 수 있습니다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용하면 모바일 기기에서도 자동 재생이 가능합니다. 또한, 아바다 테마 등 일부 테마와 엘리멘터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공합니다. [ 이 글은 2022년 5월 19일에 마지막으로 업데이트되었습니다. ] MP4 파일을 직접 서버에 업로드하여 자동 재생되도록 하고 싶은 경우에는 다음과 같은 HTML 코드를 사용할 수 있습니다. 커뮤니티에 움직이는 GIF 파일이 많이 사용되었지만 움짤 GIF는 오래된 규격이고 비효율적이어서 이제는 점차 MP4 파일로 대체되고
있습니다. 이와 관련하여 "GIF 사용을 멈춰주세요!"를 참고해보세요. 움직이는 GIF 파일을 MP4 파일로 변환시켜주는 사이트도 있습니다. 예: GIF to MP4 converter. 동영상 파일을 서버에 직접 업로드하여 삽입할 경우 동영상 용량 때문에 트래픽이 많이 발생할 수 있습니다. 그러므로 동영상 파일은 (웹호스팅) 서버에 직접 업로드하는 방법 대신 유튜브 채널에
업로드하여 공유하는 방법이 많이 사용됩니다. YouTube 영상을 자동 재생되도록 삽입하려는 경우 임베드 코드 내의 동영상 URL 뒤에 ?autoplay=1를 추가하면 됩니다. 유튜브에서 공유하려는 영상의 '공유' 버튼을 클릭하고 '퍼가기'를 클릭하여 유튜브 영상 임베드 코드를 복사합니다.유튜브 영상 자동 재생/반복 재생되도록 삽입하는 방법
HTML 동영상 자동 재생 MP4 파일
유튜브 영상 자동 재생되도록 삽입하기
유튜브 영상 삽입 코드는 다음과 비슷합니다.
코드에서 유튜브 영상 URL(예: //www.youtube.com/embed/fNU-XAZjhzA) 뒤에 ?autoplay=1를 추가합니다. 하지만 크롬에서는 사용자 인터랙션 없이 오디오 콘텐츠를 자동 재생되지 않도록 막고 있다고 합니다. 그래서 &mute=1 파라미터를 추가하면 크롬에서도 자동 재생이 작동합니다.
최종적으로 다음과 비슷한 코드가 됩니다.
<iframe width="560" height="315" src="//www.youtube.com/embed/fNU-XAZjhzA?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>자동 반복 재생되도록 하려면 &loop=1을 추가하도록 합니다.
참고로 반응형으로 작동하도록 하고 싶은 경우 "워드프레스: 모바일 기기에서 유튜브 동영상이 잘리지 않고 표시되도록 하기"의 "HTML 코드로 유튜브 동영상 추가하는 방법" 부분을 참고해보시기 바랍니다.
워드프레스에서는 '사용자 정의 HTML' 블록에 위의 코드를 추가합니다. 티스토리 블로그에서는 HTML 모드에서 위의 코드를 원하는 곳에 직접 삽입하면 됩니다.
이 방법으로 유튜브 영상을 삽입하면 워드프레스에서 다음과 같이 영상이 자동 재생됩니다.
하지만 모바일 기기에서는 자동 재생이 되지 않을 것입니다. 이는 모바일 기기에서 데이터를 소진하지 못하도록 제한하고 있기 때문입니다. 모바일에서도 자동 재생되도록 하고 싶은 경우 아래의 방법을 이용할 수 있습니다.
모바일에서도 유튜브 영상 자동 재생되도록 하기
모바일 기기에서도 유튜브 동영상이 자동 재생되도록 하고 싶은 경우 Stackoverflow의 글 "How can I autoplay a video using the new embed code style for Youtube?"(유튜브의 새로운 임베드 코드 스타일을 사용하여 동영상을 자동 재생하는 방법)에서 제시하는 자바스크립트 코드를 사용할 수 있습니다.
<div id="player"></div><script> var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: 'VideoID', playerVars: { 'autoplay': 1, 'rel': 0, 'showinfo': 0, 'modestbranding': 1, 'playsinline': 1, 'showinfo': 0, 'rel': 0, 'controls': 0, 'color':'white', 'loop': 1, 'mute':1, // 'origin': '//meeranblog24x7.blogspot.com/' }, events: { 'onReady': onPlayerReady, // 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { player.playVideo(); player.mute(); }var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script>상기 코드에서 VideoID 부분을 유튜브 영상의 videoid로 대체하도록 합니다(예: fNU-XAZjhzA). 위의 코드를 그대로 사용할 경우 컨트롤이 표시되지 않습니다. 컨트롤이 표시되도록 하려면 'controls': 0을 'controls': 1로 바꾸면 됩니다.
또한, 'showinfo': 0이 추가되어 있지만, 이 파라미터는 사용이 중단되어 더 이상 작동하지 않으므로 이 라인은 삭제해도 될 것 같습니다.
이 방법으로 영상을 삽입하면 Javascript를 로드해야 하기 때문에 영상이 조금 늦게 로드되지만 모바일 기기에서도 작동합니다. 예시:
자동 재생 동영상 배경 설정하기 - 아바다 테마, 엘리멘터 페이지 빌더 등
아바다 테마 등 페이지 빌더를 사용하는 테마와 엘리멘터 페이지 빌더 등을 사용하는 경우 섹션 등에 YouTube 동영상을 배경으로 지정할 수 있습니다.
Avada 테마를 사용하는 경우 컨테이너 편집의 Background 섹션에서 YouTube/Vimeo 동영상을 배경으로 설정할 수 있습니다.
YouBue/Vimeo Video URL or ID 부분에 동영상 URL(예: //youtu.be/fNU-XAZjhzA)을 입력하면 됩니다.
마찬가지로 자동 재생되도록 하려면 Mute Video(동영상 음소거) 옵션을 Yes로 설정해야 합니다.
Elementor 페이지 빌더에서도 비슷한 방법으로 동영상을 배경으로 설정할 수 있습니다. 섹션 편집 화면에서 스타일 탭을 선택하고 배경 타입을 동영상을 선택한 다음, 비디오 링크에 유튜브/비메오 링크(예: //www.youtube.com/watch?v=fNU-XAZjhzA)를 입력하도록 합니다.
시작 시간과 종료 시간을 설정할 수 있고, 모바일에서 재생 옵션을 활성화할 수도 있습니다. 모바일에서 재생 옵션을 "예"로 선택하여 테스트해보니 모바일 기기에서도 자동 재생이 되었습니다.
마치며
이상으로 유튜브 영상을 자동 재생 되도록 블로그에 삽입하는 방법에 대하여 살펴보았습니다. 본문에서 제시하는 방법을 이용하면 구글 크롬, 마이크로소프트 엣지 브라우저, 파이어폭스 등의 브라우저에서 잘 작동할 것입니다.
기분이 우울할 때에는 기운이 다운될 때에는 우울한 음악보다는 모차르트 음악이나 드보르작 교향곡 9번 '신세계로부터' 교향곡과 같이 활기찬 음악을 들으면 좋은 것 같습니다.
참고
- 블로그에 유튜브 동영상 삽입 시 타이틀 링크 비활성화하기
- 블로그에 구글지도를 삽입하는 방법
- 워드프레스 수익형 블로그 만들기