montblan9.net

デザインと、趣味と、ときどきアダルト。

2016.06.03 / 

jQuetyを使わずに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

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrPin on PinterestShare on LinkedInDigg this
CSSJavascriptjQueryrevine-oldYOUTUBE背景

MontBlanc. • 2016/06/03


Previous Post

Next Post

montblan9.netの情報をプッシュ通知で受け取る

montblan9.netの最新情報やイチオシ情報をプッシュ通知で受け取ることができます。>>詳しくはこちら