「youtubeの再生ボタンをカスタマイズしたいんです。」
という要望もなしに、当然できますよねと言った感じで、デザインが送られてくることは一度や二度ではありません。
全体のテイストを考えたときに、いきなりあの赤いボタンが現れてしまうのを避けたい気持ちはよくわかります。
しかし、2020年1月現在、パラメーターや、ソースをちょこちょこといじっても、デザインを変更することはできません。
ではどうするのか、
「YouTube IFrame Player API」というものを使用して、実現します。
1:自作のボタン、またはサムネを用意する。
2:1がiframe(youtube)の上に被さるようにコーディングする
3:1をクリックすると、iframe(youtube)が再生され、1が引っ込む。
4:終了したら、1が再度浮上する
と言ったフローでやってみました。
※以下には、最低限の処理のみ再現しています。実用の場合は、サムネが消えるまでのアニメーションの秒数を調整したりして、不自然とならないよう、叩き台として、扱ってください。
▼HTML
▼SCSS
CSSでは、「pause」というclassが付いているかいないかで状態を分けます。
そんな感じで、取り急ぎYouTubeの再生ボタン・サムネをカスタマイズできました。
これを基本として、巻き戻し(早戻し?)や、早送りなど様々な処理を加えられますし、
https://developers.google.com/youtube/iframe_api_reference#Playback_controls
イベントも、再生中、停止中だけでなく、エラーが起きた時や、動画の再生画質や再生速度が変わった時など、様々なものを指定できます。
https://developers.google.com/youtube/iframe_api_reference#Events
少し記述量は増えますが、最初のおまじないが長いくらいで、あとは普通のことを書いていくだけです。
慣れてしまえば、難易度はとても低く、色々な事ができるようになりますので、
是非是非臆せず、YouTube IFrame Player API で遊んでみてはいかがでしょうか。
という要望もなしに、当然できますよねと言った感じで、デザインが送られてくることは一度や二度ではありません。
全体のテイストを考えたときに、いきなりあの赤いボタンが現れてしまうのを避けたい気持ちはよくわかります。
しかし、2020年1月現在、パラメーターや、ソースをちょこちょこといじっても、デザインを変更することはできません。
ではどうするのか、
「YouTube IFrame Player API」というものを使用して、実現します。
1:自作のボタン、またはサムネを用意する。
2:1がiframe(youtube)の上に被さるようにコーディングする
3:1をクリックすると、iframe(youtube)が再生され、1が引っ込む。
4:終了したら、1が再度浮上する
と言ったフローでやってみました。
※以下には、最低限の処理のみ再現しています。実用の場合は、サムネが消えるまでのアニメーションの秒数を調整したりして、不自然とならないよう、叩き台として、扱ってください。
▼HTML
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="iframe_wrap">
<div id="player"><!-- ここにyoutubeのiframeが入ります。--></div>
<div id="js-play_btn" class="play_btn pause"><!-- ここに自作のサムネを用意します。--></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// 2. This code loads the IFrame Player API code asynchronously. (←これは呼び出しのおまじない)
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', { (←ここにHTMLに指定されているIdを入力)
videoId: 'M7lc1UVf-VE', (←ここでYoutTubeのURL末尾の方にあるIdを入力)
events: { (←この{ }の中に、なんのイベントを使うかを記入する。)
'onReady': onPlayerReady, (←iframeが用意された時のイベント)
'onStateChange': onPlayerStateChange (← playerの状態が変わった時のイベント)
}
});
}
// 4. The API will call this function when the video player is ready. (← ここに処理を書いていきます。)
function onPlayerReady(event) { //playerの用意ができた時の処理です。
$('#js-play_btn').on('click',function(){ //'#js-play_btn'をクリックしたら
$(this).removeClass('pause'); //'#js-play_btn'から「pause」というclassを除去
event.target.playVideo(); //youtubeを再生する
})
}
function onPlayerStateChange(event) { //playerの状態が変わった時の処理です。
if (event.data == YT.PlayerState.PLAYING) { //再生中は
$('#js-play_btn').removeClass('pause'); //「pause」というclassを除去
} else if (event.data == YT.PlayerState.ENDED) { //再生が終わったら
$('#js-play_btn').addClass('pause'); //「pause」というclassを加える
}
}
</script>
</body>
</html>
▼SCSS
CSSでは、「pause」というclassが付いているかいないかで状態を分けます。
1:「pause」というclassが付いていたら(停止中)サムネがpointer-events: auto;反応できて、 opacity: 1;透明ではなくなる
2:「pause」というclassがなくなったら(再生中)サムネがpointer-events: none;反応しないようにして、 opacity: 0;透明でにする
以上1・2の処理を書きます。あとは自由です。
2:「pause」というclassがなくなったら(再生中)サムネがpointer-events: none;反応しないようにして、 opacity: 0;透明でにする
以上1・2の処理を書きます。あとは自由です。
#iframe_wrap { padding-bottom: 56.25%; position: relative; width: 500px; } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .play_btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: url(https://placehold.jp/3d4070/ffffff/150x150.png) no-repeat; background-size: 100% 100%; opacity: 0; &:after { display: flex; align-items: center; justify-content: center; width: 150px; height: 50px; background: #e00; content: "再生"; } //一時停止 &.pause { pointer-events: auto; opacity: 1; &:after { } } }
そんな感じで、取り急ぎYouTubeの再生ボタン・サムネをカスタマイズできました。
これを基本として、巻き戻し(早戻し?)や、早送りなど様々な処理を加えられますし、
https://developers.google.com/youtube/iframe_api_reference#Playback_controls
イベントも、再生中、停止中だけでなく、エラーが起きた時や、動画の再生画質や再生速度が変わった時など、様々なものを指定できます。
https://developers.google.com/youtube/iframe_api_reference#Events
少し記述量は増えますが、最初のおまじないが長いくらいで、あとは普通のことを書いていくだけです。
慣れてしまえば、難易度はとても低く、色々な事ができるようになりますので、
是非是非臆せず、YouTube IFrame Player API で遊んでみてはいかがでしょうか。