YouTube の載せ方 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ YouTbe の載せ方(標準エディタ)

① 載せたい YouTubeの動画を開いて動画下の共有をクリックします。


リアナのカスタマイズ日記(CSS編集用デザイン)



② 埋め込みコードをクリックします。



リアナのカスタマイズ日記(CSS編集用デザイン)


③ 下記の部分が埋め込みコードです。


リアナのカスタマイズ日記(CSS編集用デザイン)



④ 動画の大きさを決めます。
自分で大きさを決めたい場合は、カスタムサイズで横または縦のどちらかを
指定します。


● 下記はYouTube が用意している動画の大きさ。


リアナのカスタマイズ日記(CSS編集用デザイン)


● 下記は、カスタムサイズで自分で画像を指定したケース。
★ 動画の大きさは、横200px以上でかつ、縦200px以上に指定してください。
そうしないと小さすぎる動画によっては Video Player is too small と表示される
場合があります。




リアナのカスタマイズ日記(CSS編集用デザイン)


⑤ 動画の大きさを決めたら、埋め込みコードをコピーします。


リアナのカスタマイズ日記(CSS編集用デザイン)


⑥ マイページでブログを書くをクリックします。


リアナのカスタマイズ日記(CSS編集用デザイン)


⑦ こちらをクリックします。



リアナのカスタマイズ日記(CSS編集用デザイン)



⑧ 移動するかどうかを聞いてくるので、OKをクリックします。


リアナのカスタマイズ日記(CSS編集用デザイン)


⑨ 動画の埋め込みコードを貼り付けます。(⑤でコピーしたもの)


リアナのカスタマイズ日記(CSS編集用デザイン)


⑩ 記事タイトルを入れるのを忘れずに。



リアナのカスタマイズ日記(CSS編集用デザイン)


⑪ プレビューで確認します。


リアナのカスタマイズ日記(CSS編集用デザイン)




⑫ 投稿をします。


リアナのカスタマイズ日記(CSS編集用デザイン)





● フリースペース、フリープラグインに動画を貼る場合も埋め込みコード
求める方法は同じです。
埋め込みコードをコピーしたらフリースペースやフリープラグインに貼ればOKです。



● 埋め込みコードの形式


① YouTube動画のURL(は動画IDで11桁)

http://www.youtube.com/watch?v=


② 埋め込みコード(は動画IDで11桁)

<iframe width="400" height="225" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>


③ 自動再生の場合は、autoplay=1 をいれます。
  動画ID以降のものはパラメータで、最初のパラメータだけ、? でつなげます。


<iframe width="400" height="225" src="http://www.youtube.com/embed/?autoplay=1" frameborder="0" allowfullscreen></iframe>

  2つ目以降の場合は、& でつなげます。

<iframe width="400" height="225" src="http://www.youtube.com/embed/?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>


④ widthが横のpx heightが縦のpx です。