jQueryを一切使わずにYOUTUBEの動画をミュート状態で背景に敷く方法を書きました。
MontBlanc.です。
最近、動画を背景に敷いたWEBページを作成する機会があったのですが、jQueryのライブラリなどが何故か動かず代替として、jQuery不使用のものを使用することにしました。
ポイント
・背景全画面や一部に表示できたりする
・jQueryを使わない
・CSSなどである程度制御できる
準備するもの
YOUTUBE IFLAME PLAYER API
youtube公式のAPI
設置方法
YOUTUBE IFLAME PLAYER APIを読み込んで以下を設置。
より上に設置して問題なく動作しました。
Youtubeの共有画面で作成できるiframeでもCSSをちょちょいすれば、できないこともないのですが、その場合音声が再生されてしまうのですが、こちらでは、Javascript上でmuteの処理を行ってくれるので、無音状態を作ることが可能です。
<script src="https://www.youtube.com/iframe_api"></script> <script> // YouTubeの埋め込み function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'youtube', // 埋め込む場所をIDで設定 { videoId: '09R8_2nJtjg', // YouTubeのIDを指定 playerVars: { loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須 playlist: '09R8_2nJtjg',//次に流すYoutubeのID controls: 0,//コントローラー無し autoplay: 1,//オートプレイ showinfo: 0//動画タイトルなど表示しない }, events: { 'onReady': onPlayerReady } } ); } //プレイ準備完了後 function onPlayerReady(event) { event.target.playVideo(); event.target.mute(); } </script>
htmlは以下
<div id="youtube"></div>
背景をフルで表示する時は #youtube をCSSで成形していきます。
CSSで成形する際の注意
指定したIDの中にiframeを設置して表示しているようで、ブラウザはサイズによってはレターボックス(黒帯)が縦や横に入ったりするので、実際に使う時は再生状態を見ながら調整を行う必要あり。ただwidthとheightを100%にしてもキレーに全画面ならない(min〜とかmaxは必要かも)。
サンプルはCSSの事例はまた後ほど!b