ブログにYOUTUBEを貼ってバンドを応援しよう♪

アメブロでYOUTUBEを貼れるのは、ブログ本文・サイドバーのプラグイン・メッセージボードの３ヶ所です。


見栄え的にはサイドバーに貼りたいところですが、アプリでは表示されないので、大事なことはメッセージボードにも。アプリでは「ブログ情報」をクリックすると表示されます。


YOUTUBE動画をアメブロに貼るには、動画下の「共有」を選択して、アメブロマークをクリックすると、ご自身のブログを書く画面がポップアップで出てきて、本文記入画面に「埋め込みコード」が入力された状態になっています。（埋め込みコード、タグ、htmlソースなど呼び名は様々ですが、このカッコ→ < > で囲まれた文字列のこと）


このままのコードを使うと動画サイズはこんな感じ。


このサイズのままでサイドバーに貼ると６割くらい欠けてしまうので、縦横サイズを決めるwidth="480" height="270"　（幅480×高さ270ピクセル）の数値を変更します。

「埋め込みコード」をクリックするとコードが表示され、その下に「もっと見る」という文字が出てきますので、それをクリックするとカスタムページが開きます。片方の空欄にお好みの数値を入力すると、自動的に比率計算されます。

私が使っている「3カラム・右ワイドメニュー」の右側は幅300ピクセルなので、幅300と入力すると自動計算で縦は169に。

各設定はここから。


プラグインの追加→フリープラグインをクリックして、上記埋め込みコードを入力欄にコピペして保存。
メッセージボードはフリープラグインと同じくらいのサイズで丁度いいかと思うけれど、本文と同じ480ピクセルでも納まります。

私が使ってるボクセカ動画のコードはこれ。

<iframe width="300" height="169" src="https://www.youtube.com/embed/poXDN-kaB94" frameborder="0" allowfullscreen></iframe>


<iframe width="300" height="169" src="https://www.youtube.com/embed/kvR7HtmKGFY" frameborder="0" allowfullscreen></iframe>


次回はプラグインにインスタグラムとVineを貼る方法をご案内するよ。