はてなブログのサイドバーにYoutube動画をレスポンシブで埋め込もう

おすっ！つつな（@tu_na_69）です(・∀・)

YouTube動画を貼り付けたのにモバイルで開いたらサイズが切れている!?そんな時の対処法としてレスポンシブ対応で埋め込む方法があります。

サイドバーにコードを貼り付ける

 前回、YouTube動画をはてなブログに埋め込む方法を紹介しました。

pea-nut.hatenablog.com

サイドバーにyoutube動画を埋め込みたい時は、サイドバーのHTMLモジュールコードをコピペします。

①YouTubeのページから「共有」→「埋め込む」でコードをコピーします。

②はてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」を開く。

③「モジュールを追加」し、「HTML」にコードを貼り付ける。

④「適応」をクリックすれば完了です。 

ところが、この方法では、サイドバーから画面がはみ出してしまいます。

半分くらいしか見えない(T_T)

動画サイズをレスポンシブに

Youtubeで作る埋め込みコードはあらかじめ動画サイズが指定されています。幅が560pxと、通常のサイドバーのサイズよりも大きいために、入りきらないようです。

解決策としては、コードの画面サイズを自分で書き換える方法もありますが、画面サイズに合わせて自動的にサイズ調整してくれるレスポンシブ対応をしてみたいと思います。

調べてみたところ、ありました！

こちらのサイトを参考にさせていただきました。

Youtubeの埋め込み動画をレスポンシブに対応させる方法 | WebClips_Design

①動画サイズのレスポンシブのためのCSSをはてなブログのデザインに貼り付けます。

貼り付ける箇所は「デザイン」→「カスタマイズ」→「デザインCSS」です。

②先ほど貼り付けた動画の埋め込みコードにmovie-wrapのCSSを設定します。

<div class="movie-wrap"> 

==YouTube動画の埋め込みコード==

</div>

これで動画がレスポンシブ対応ができました。

ページを開いて確認してみてください。

PCやモバイルなどいろいろな画面サイズでチェックしてみてね。

↓サイドバーにきれいにおさまりました。

まとめ

レスポンシブを適応させると、自分でサイズ調節がいらないので便利です。これでお気に入りの動画をサイドバーでもさりげなくアピールすることができます。