【はてなブログ】記事内に貼り付けたYouTube動画を調節する方法

当サイトにお越しいただきありがとうございます。

ブログ運営者のポチ（@sunrise_033）です。

「はてなブログにYouTube動画を貼り付けts時にサムネが切れてしまう！」

そんな時にはこの方法を試してみてください。

この記事では、はてなブログに貼り付けたYouTube動画のサムネがスマホ画面で切れて表示されてしまう時の対処法をみていきたいと思います。

下のような感じに貼りつけられます。

YouTube動画をよく貼り付ける人は覚えておくと便利なので、ぜひ参考にしてみてください。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

はてなブログにYouTube動画を貼り付けよう

最近はYouTubeからの情報もすごい参考にさせていただくものが増えたので、動画参考として記事に貼り付けています。

YouTube動画をはてな記事に貼り付ける方法は簡単なので紹介します。

これで完了です。

＊動画はガンプラ作り専門のGundamwork37さんのチャンネルです。

貼り付けたYouTube動画の大きさを調整する

当ブログが使用している「Under Shirt」というテーマは、YouTube動画を貼り付けるとスマホ表示の時にサムネが切れてしまいます。

上記の動画はスマホで見ると切れてしまっていますよね。

この対処方法を紹介します。

.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%;
}

<div class="movie-wrap">

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

</div>

YouTube動画の埋め込みコードのところに貼り付けたいYouTubeコードを入れてください。

このように綺麗に枠にはまりました。（スマホで見るとしっかり枠に収まっています。）

まとめ

はてなブログにYouTube動画を貼り付ける方法を見ていきました。

簡単に貼り付けることができて、調整もHTMLコードでできるので覚えておくと便利に使えます。

動画貼り付けの参考になれば幸いです。

NEXT→動画を「GIF形式」で記事に貼り付ける方法

最後まで読んでいただき、ありがとうございます。

あわせて読みたい

はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

ポチ

この記事が良いと思ったら、ポチっ！してくれると嬉しいです！