YouTubeタグの設定


2014/12/17 現在
yuz_ブログのテンプレートにおける、YouTube埋め込みコードの扱いについて。

YouTube埋め込みコードの取得と利用方法　－－－－－－－

＊ YouTubeの動画を右クリックして埋め込みコードを取得。
＊ 埋め込みコードを、ブログ投稿フォームのソースコードのタブを開いて記述する。

YouTube埋め込みコードに変更を加えない場合は、次のとおりの処理が自動的に行われる。

・動画の静止画像サムネイルを表示して、動画リンクを設定する。
・サムネイル画像及び動画サイズを、動画を配置した要素の幅を基準に既定幅で設定する。
・  現時点での動画の既定幅は、動画を配置した要素幅の75％とする。


基本の表示　－－－－－－－－－－－－－－－－－－－－－

YouTube埋め込みコードに変更を加えない場合は、テンプレートよる自動再設定が行われる。
テンプレートによる自動再設定の詳細は、次のとおり。

・動画サイズ： 動画を配置した画面幅の75％で、縦横比を維持して表示
・背景色： #1c1c1c
・表示位置余白： margin 0
・表示順位： wmode=transparent を設定して背面にする
・関連動画の表示： rel=0 再生終了時に関連動画の表示をしない


表示設定の変更　－－－－－－－－－－－－－－－－－－－

表示設定の変更は、YouTube埋め込みコードに対して次の変更を行う。

・ テンプレートによる自動再設定を無効化：　iframe属性に、class="noresize" を追加
 
・ 動画サイズ： iframe属性に、resize="＊" を動画を配置した画面幅の％値で追加
・ 背景色： ifarame属性に、background-color="色名" を追加
・ 表示位置余白： iframe属性に、margin="＊ ＊ ＊ ＊"  をショートハンド書式で追加

・ 表示順位： 変更不可
・ 関連動画の表示： 変更不可


ーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考用のページは、以下のブログ記事リンクを参照のこと。

http://yuz1.blog.shinobi.jp/Date/20141213/1/