ホームページにyoutube動画を埋め込み動画を操作しよう！

今や自分のブログやホームページに動画を埋め込むのが当たり前になっていますが、

今回は初心に戻ってyoutubeの埋め込み方法について解説したいと思います。

 

まずは基本。iframeで簡単埋め込みコード

youtubeはソーシャルメディアにとてもやさしい作りになっているので簡単操作で誰でも共有することができます。

まずは共有したい動画のページを開き、①プレイヤーの下にある「共有」タブをクリックします。

facebookやTwitterに投稿したい場合は「この動画を共有」タブよりURLをコピーして投稿するだけ！

新設にもGoogle+やmixiなどのロゴが出ているので、共有できるソーシャルメディアの情報が一目でわかるお手軽さ。

 

WordPressなどのブログに共有したい場合は、「埋め込みコード」タブよりソースをコピーしてブログの記事に貼り付けて下さい。

(WordPressの場合は投稿画面の「テキスト」タブをクリックしてから貼り付けたほうがいいですよ。)

 

これだけで簡単に動画を共有することができます。めっちゃ簡単♪

 

ここからが本題。Javascriptを使用し、埋め込む動画をカスタマイズすることができるYoutubeAPIというものがありますので、

今回はそちらを使用し、動画の見た目を操作してみましょう。

 

YoutubeのPlayer APIを使いこなす

APIといってもこれまた親切なYoutube様のおかげで簡単にカスタマイズすることができます。

（たとえば、自動再生や無音設定、メニューの非表示などあらかたの必要なカスタマイズが可能です）

Clash Royale HackClash of Clans HackMy Cafe Recipe Stories HackGolf Clash HackPokemon Duel HackMobile Legends HackSuper Mario Run HackRoblox Robux HackClash Royale Cheat HackYugioh Duel Links Gems and Golds HackFree Streaming Movie Online 2017

 

基本設計

youtubeはFlashを使用しているのですが、公式サイトでも推奨されているSWFObjectを使用し、YoutubePlayerの読み込みを行います。

まずはSWFObjectをダウンロードし、ホームページ上で読み込むようにしましょう。

ダウンロードしたファイルで必要なのは「expressInstall.swf」と「swfobject.js」のみです。

１．コチラをFTPにてアップロードし、下記のソースをheadタグ内に貼り付けて下さい。(パスはご自身の環境によって変更しましょう)

<script type="text/javascript" src="scripts/swfobject.js"></script>

２．動画を呼び出したい位置に下記のソースを貼り付け。
<div id="youtube_box"></div>
<script type="text/javascript">
var flashvars = {};
var params = { allowScriptAccess: "always" };
var attributes = { id: "youtube_player" };
swfobject.embedSWF(
  "http://www.youtube.com/apiplayer?enablejsapi=1version=3&video_id={動画のID}&playerapiid=youtube_player&showinfo=0",
  "youtube_box",
  "520", "400", "9",
  "scripts/expressInstall.swf", flashvars, params, attributes);
</script>

動画のIDはYoutubeの動画ページのURLの
「http://www.youtube.com/watch?v={動画ID}」
から取得することができます。

また"youtube_player"と"youtube_box"は任意のものでかまいません。(それぞれ2箇所記述するところがあるので、変更する場合は注意して下さい。)

これで動画が埋め込めたかと思います。

カスタマイズする場合は「swfobject.embedSWF()」の第一引数のURLパラメーターを変更します。
※「?」から後に続く文字で「{キー}={値}」がついになっています。複数の場合は「&」でつなげています

例：動画の再生を開始する前にタイトルや評価などの情報を表示したい場合
showinfo=1をURLに追加

PlayerAPIのパラメーター一覧はコチラを参考にして下さい

 

私のオススメPVとともにサンプルをご紹介いたします。

自動再生(autoplay=1)

 

//

RIP SLYME – 熱帯夜

ループ再生(loop=1)

 

//

SDN48 愛、チュセヨPV

無音

 

この場合JavascriptAPIを使用するため、少し特殊になります。

下記のコードを追加いたします。

動画のパラメータにはJavascriptAPIを使用するため、「enablejsapi=1」を追加いたします。

<script type=”text/javascript”>// <![CDATA[
function onYouTubePlayerReady(playerId) {
var player = document.getElementById(“{youtube_player}“);
if(player){
player.setVolume(0);
}
}

</script>

実はわかりづらいYoutube埋込みコードの2つのパターン

これは私自身もはまったのですが、実は上記のコードではよくあるプログレスバーは表示されません。

というのもYoutubeAPIには2通りのURLがあります。

http://www.youtube.com/v/VIDEO_ID

http://www.youtube.com/apiplayer?enablejsapi=1&video_id=VIDEO_ID
上記のサンプルは下記のURLを埋め込んであります。(通常の埋め込み時には上記のものを使用するといいでしょう)
この違いは下記の場合、メニューバーを細かく自作できるという利点があります。
Javascriptから残りの動画再生時間を計算したりいろいろ出来るので興味のある方はこちらをご参考ください。

また、埋め込みのデモプレビュー画面もあったのでよければこちらもご参考ください。
https://developers.google.com/youtube/youtube_player_demo?hl=ja

//