【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

はてなブログ、記事内に貼り付けたYouTube動画を調節する簡単手順を紹介

悩み人

はてなブログにYouTube動画を貼り付けた時にサムネが切れてしまう。何か対処方法ないかな?

そんな疑問にお答えします。

どうも、ブログ運営者のポチ(@sunrise_033)です。

結論からいうと、CSSデザインとHTML編集にコードを貼り付ければ動画の大きさを調整することができます。

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

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

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

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

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

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

STEP
貼り付けたい動画を視聴します。
f:id:sanrisesansan:20201102045630j:plain:w330
ポチ

最近、ガンプラ作り動画にハマっているのでこの動画をチョイス。

STEP
動画タイトルの右下にある「共有」をクリックします。
f:id:sanrisesansan:20201102050434j:plain:w330
STEP
埋め込むをクリックします。
f:id:sanrisesansan:20201102050452j:plain:w330
STEP
貼り付け用のコードをコピーします。
f:id:sanrisesansan:20201102050457j:plain:w330
STEP
はてなブログに貼り付けます。

はてなブログの編集ページの「HTML編集」から貼り付けたい場所に貼り付けます。

これで完了です。

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

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

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

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

ポチ

では、さっそく対処方法を紹介します。

STEP
はてな編集からデザイン→カスタマイズ→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%;
}
STEP
記事編集ページでHTML編集に下記のHTMLコードを貼り付けます。
<div class="movie-wrap">

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

</div>

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

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

まとめ

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

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

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

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

目次