アメブロにYouTube動画を貼る方法【2014】

YouTubeの仕様の変更、またアメブロも使用できるタグも変化する為2014年度最新のYouTube動画を貼る方法記述したいと思います。

アメブロ内での設定

アメーバヘルプにも記述はあるのですが【 記事編集画面を「タグ編集エディタ」に切り替えて下さい。】とあります。
実際には「標準エディタ」なら「HTMLタグを表示」タブをクリック！
「新エディタ」なら「HTML表示」にしてコピーをしたタグを貼りつければ、YouTube動画を貼ることは可能です。

YouTube動画のタグの取得

貼り付けたいYouTube動画のページに行きます。

①動画画面下部にある【共有】をクリックします。

②【共有】をクリックしたときに出てきます【埋め込みコード】をクリックします。

③次にサイズをします！（画像では、3カラム用410pxを例としています）
アメブロの各項目のサイズについては以下となります。（新デザイン）

記事コンテンツ幅（2カラム）：605px　
記事コンテンツ幅（3カラム）：410px
サイドバー/フリースペース/フリープラグイン：180px
サイドバー/フリースペース/フリープラグイン（ワイド）：300px

④埋め込み用のコードをコピーします。

貼り付け

アメブロ編集記事内、表示したいところに貼り付けて完了

注意

・YouTube動画を投稿した人が公開はするけど、貼り付けを拒否している場合はコードの取得はできません。
・この方法で取得したコード（iframe）では携帯では対応しておりません。
携帯でも表示されるようにする場合は「以前の埋め込みコードを使用する」にチェックを入れて表示されたコードを使います。

カスタマイズ

▼コントロールバーの色を変える方法
動画ＵＲＬの最後に「 ?theme=light 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?theme=light" frameborder="0" allowfullscreen></iframe>

▼動画のインフォメーションバーを消す方法
動画ＵＲＬの最後に「 &showinfo=0 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4&showinfo=0" frameborder="0" allowfullscreen></iframe>

▼コントロールバーを自動的に隠す方法
動画ＵＲＬの最後に「 &autohide=1 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4&autohide=1" frameborder="0" allowfullscreen></iframe>

▼全てを採用すると…
動画ＵＲＬの最後に「 ?theme=light 」「 &showinfo=0 」「 &autohide=1 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?theme=light&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>

▼YouTubeロゴを非表示させる方法
動画ＵＲＬの最後に「 ?modestbranding=1 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?modestbranding=1" frameborder="0" allowfullscreen></iframe>

※チャンネル登録者数を増やす場合は用いませんが、記事ページの離脱に役に立つかもしれませんね！


▼動画を指定の再生時間から再生させる方法
動画ＵＲＬの最後に「 ?start=再生開始秒数 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?start=再生開始秒数" frameborder="0" allowfullscreen></iframe>

▼動画を指定の再生時間に停止させる方法
動画ＵＲＬの最後に「 ?end=再生停止秒数 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?end=再生停止秒数" frameborder="0" allowfullscreen></iframe>

▼動画の再生後に表示される関連動画を表示させない方法
動画ＵＲＬの最後に「 ?rel=0 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?rel=0" frameborder="0" allowfullscreen></iframe>

▼動画を自動で繰り返し再生させる方法
動画ＵＲＬの最後に「 ?loop=1 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?loop=1" frameborder="0" allowfullscreen></iframe>

※loop パラメータは、現時点では、playlist パラメータと組み合わせて AS3 プレーヤーで使用した場合のみ動作します。


▼動画を自動再生させる方法
動画ＵＲＬの最後に「 ?autoplay=1 」を追記します。

～例～

<iframe width="410" height="231" src="//www.youtube.com/embed/n5w8hhb5BU4?autoplay=1" frameborder="0" allowfullscreen></iframe>

※訪問者が動画を再生させることなく自動で再生されます。


アメブロの記事内に、メッセージボード内、サイドバーと使い方はetcですね

動画は、あさくさらすく様より提供していただきましたm(_ _ )m