【はてなブログ】埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法【コピペでOK】

こんにちは祐(@yuu304810)です。

 

今回は『はてなブログに埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法』について、解説していきます。

 

下記が完成イメージです⇩

 

改善前

f:id:yuu304810:20210919130447j:image

 

改善後

f:id:yuu304810:20210919130450j:image

 

とくに難しい作業や、専門的な知識は必要ないので、ぜひ参考にしてみてください。

 

この記事で得られる情報

・はてなブログに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動画の埋め込みコードと書かれた箇所に、自身が埋め込みたいYouTube動画の埋め込みコードを貼り付けてください。

 

まとめ

 

今回は『はてなブログに埋め込んだYouTube動画のサムネが見切れてしまう場合の対処法』について、解説しました。

 

CSSと、HTMLコードをコピペするだけで改善できるので是非。

 

最後までお読み頂きありがとうございました。

 

少しでも参考になれば嬉しいです。

 

トップへ戻る