Youtubeの動画を表示させる | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

アメブロにYoutubeの動画を埋め込む

あの噂の美少女が、ちょびっと悩んでたみたいなので、その方法を御案内します^^;

587px-YouTube_Logo.svg

結論から申し上げます。←できる人(笑)

youtubeで提供される「埋め込みコード」をアメブロの「ブログを書く」(記事の編集:エディタ)で「HTML表示」にして貼り付けるだけです。

youtubeにログインしてないと埋め込みコードを取得出来ないと思います。
ログインは、グーグルにアカウントを持ってる方でしたら簡単にログイン出来ますので、ログインしておいて下さい。
また、youtubeの場合は、ニコニコ動画と違って、一回ログインしちゃえば、ログアウトしない限り、ずっとログイン状態がつづいていくと思います。


YouTube でアカウントを作成する - YouTube ヘルプ


ユーチューブの動画を埋め込む


1.埋め込みたい動画のページを開く

埋め込みたい(表示させたい)動画のページを開いて、画面下方左側の「共有」というボタンをクリックして下さい。
そして、現れたロゴマークの中から、アメブロのボタンをクリックして下さい。(↓)

共有ボタン


2.埋め込みコードを取得


1.でアメブロのマークをクリックすると、下のような小窓が開きますので、この埋め込みコードをコピーして、表示させたい箇所に貼り付ければOKです。

埋め込みコード

■貼り付けたものが、こちらです(↓)。




**補足説明**

サイドバー等の、幅の狭いスペースに表示させたい場合は、タグコードの数字を調整します。
上の動画のコードは、このようになってます(↓)。

<iframe width="480" height="270" src="https://www.youtube.com/embed/F0Iue8ZwNsk" frameborder="0" allowfullscreen></iframe>

*1:赤字の数字が、この埋め込みの横幅です。
*2:ピンクの数字が、この埋め込みの高さです。

幅と高さの比率がかわらないようにして、半分の数字にしてみました(↓)。

<iframe width="240" height="135" src="https://www.youtube.com/embed/F0Iue8ZwNsk" frameborder="0" allowfullscreen></iframe>

      


※サイドバーにyoutubeの動画を貼り付ける場合は、上のようにサイドバーの幅に合わせて縮小した数字を入れたコードを「フリースペース編集」に貼り付ければ表示させる事が出来ます。



思うこと
御自身の大事な忘れたくない動画なんかを、上のような感じで、サイトに埋め込んでおけば、わざわざYouTubeに行かなくても、そのサイトで見る事が出来て便利かな?と思います。



☆ブィブィ  ('-^*)/


ヒマしてます。