유투브를 이용한 배경화면의 사운드를 끄는 방법

유투브를 이용한 배경화면의 사운드를 끄는 방법




동영상을 이용한 사이트 & 블로그에서 활용하시면 됩니다. 

본문과 관련한 질문은 사절하겠습니다. 메일 보내지 마세요 ^^;




2018년 05월 24일, 작성된 "HTML5 Video 태그를 이용한 블로그 상단 이미지 변경"

2018년 05월 31일, 작성된 "블로그 페이지 타이틀, 동영상 플레이어를 랜덤하게 보여주는 방법"


위에 작성된 2개의 글을 참고하여  

YouTube  iframe_api 를 이용블로그 배경화면 혹은 페이지 타이틀을 구성하는 경우, 문제 아닌 문제가 있다.


2018년 05월 12일, 작성된 "구글 크롬, 유투브 동영상 자동재생 차단해제 방법"에서 처럼 동영상이 실행되지 않거나 혹은 사운드 출력에 대한 옵션을 구글에서 제공하지 않아 원치 않는 배경음악을 듣게 된다.



이런 경우, 스크립트를 이용하여 YouTube 동영상 재생시 사운드를 제거하면 된다.



Youtube 사운드 제거하는 방법.


<!-- Youtube Sound Mute -->

<script>

   var tag = document.createElement('script');

 

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 

var player;

 

function onYouTubeIframeAPIReady() {

player = new YT.Player('Youtube-Player', {

events: {

'onReady': onPlayerReady

}

});

}

 

function onPlayerReady() {

player.playVideo();

// Mute!

player.mute();

}

</script>

위 스크립트를 적용하는 방법.



<div class="video-background">

<div class="video-foreground">

<iframe id="Youtube-Player" src="https://www.youtube.com/유투브리스트?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&enablejsapi=1&playlist=유투브리스트" frameborder="0" allowfullscreen></iframe>

</div>

</div>


옵션 : 사운드를 제거  &enablejsapi=1  꼭!!! 넣어줘야 합니다.

         동영상 연속재생  &loop=1  ,  &playlist=유투브리스트



유투브를 이용한 배경화면이 꽉 차게 하는 방법



<style type="text/css">

* { box-sizing: border-box; }

.video-background {

background: #000;

position: fixed;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -99;

}

.video-foreground,

.video-background iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;   // 동영상 위에서 마우스 클릭 차단

}

@media (min-aspect-ratio: 16/9) {   // 여기부터, 동영상 전체 페이지에 꽉 차게 나오는 설정

.video-foreground { height: 300%; top: -100%; }

}

@media (max-aspect-ratio: 16/9) {

.video-foreground { width: 300%; left: -100%; }

}

</style>


묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 2

*

*

    • 댓글다는 사이 새로운 포스팅이@_@ ㅎㅎㅎ
      배경화면으로 사용한 영상에서 소리가 난다면 문제겠네요 유용한 팁입니다.

      * 상단에 해파리 영상 나오는데 너무 맘에 드네요✦‿✦

    • 12개의 영상을 랜덤하게 구성해 봤습니다.
      자주 놀러오시라구요 ^^;

이전 글

다음 글