こんにちは祐（＠yuu304810）です。
今回は『はてなブログに埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法』について、解説していきます。
下記が完成イメージです⇩
改善前
改善後
とくに難しい作業や、専門的な知識は必要ないので、ぜひ参考にしてみてください。
・はてなブログにYouTube動画を埋め込む方法
・埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法
はてなブログにYouTube動画を埋め込む方法
①【YouTube】を起動
↓
②【埋め込みたい動画】を選択
↓
③【共有】を選択
↓
④【埋め込む】を選択
↓
⑤表示されたコードを【HTML編集】に貼り付ける
上記の工程で、はてなブログにYouTube動画を埋め込むことができます。
埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法
①ダッシュボードの【デザイン】を選択
↓
②【カスタマイズ（スパナマーク）】を選択
↓
③【デザインCSS】を選択
↓
④これから紹介するコードを貼り付ける
埋め込んだYouTube動画のサムネが見切れないようにするCSSコード
.movie-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上記のコードを、デザインCSSにコピペしてください。
つぎに、記事編集画面に移動し、下記のコードを貼り付けましょう。
埋め込んだYouTube動画のサムネが見切れないようにするHTMLコード
<div class="movie-wrap">
YouTube動画の埋め込みコード
</div>
まとめ
今回は『はてなブログに埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法』について、解説しました。
CSSと、HTMLコードをコピペするだけで改善できるので是非。
最後までお読み頂きありがとうございました。
少しでも参考になれば嬉しいです。