この記事は最終更新日から1年以上経過して情報が古い可能性があります。
アメブロに普通にYouTubeの動画を貼り付けると、スマートフォンのブラウザで見た時に画面から左右がはみ出してしまい、全体が表示されません。
Amebaアプリで見ると問題のない表示ですが、ブラウザでは、iPhone版のSafariでも、Android版のChromeでも次の画像のようになります。
アスペクト比が16:9の一般的な動画ですが、この表示では左右がはみ出して見えんくなってしまっているため、12:10くらいの動画であるかのような表示になってしまっています。
また、パソコン版の2カラムレイアウトでは逆に横幅が記事の幅に足りず、右に空白ができてしまいます。
つまり、アメブロのユーザー以外、つまりアプリをインストールしていない人が見てくれた時は、かなりの確率で、ちょっとカッコワルい表示になっていると思ったほうが良さそうです。
というわけで、この問題への対処方法を考えてみたところ、概ね問題ないと思われるタグができましたので、ご紹介します。
（ご紹介するのはパソコンでの操作になります）
YouTube動画をアメブロの記事の幅にピッタリ収まるように貼り付ける方法
まず、YouTubeから記事に貼り付けたい動画の埋め込みコードを持ってきます。
下の画像のように、貼り付けたい動画を開き、「共有」→「埋め込む」の順にクリックします。
「動画の埋め込み」が表示されたら「コピー」をクリックします。
これで、埋め込みコードがクリップボードにコピーされましたので、それをメモ帳などのテキストエディタで編集します。
今回は、↓サンプルとしてこの埋め込みコードを使ってみます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/gANPXn2rlXg?si=bQmICnUKkxRyWcK2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>まず、最初の<iframeの後ろに以下のコード（style属性）を追加します。
style="margin:0;min-width:0;width:100%;height:100%"iframeと「このコード」の間にも、「このコード」と次のwidthの間にも、必ずスペース（空白文字）が必要ですのでくっつかないよう注意して下さい。
追加後の埋め込みコードは、次のようになります。
<iframe style="margin:0;min-width:0;width:100%;height:100%" width="560" height="315" src="https://www.youtube.com/embed/gANPXn2rlXg?si=bQmICnUKkxRyWcK2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>更に、これの前に、
<div style="position:relative;padding:56.25% 0 0 0;width:100%;"><div style="position:absolute;left:0;top:0;width:100%;height:100%;">後ろに、
</div></div>を付けます。
結果、埋め込みコード全体は、次のようになります。
<div style="position:relative;padding:56.25% 0 0 0;width:100%;"><div style="position:absolute;left:0;top:0;width:100%;height:100%;"><iframe style="margin:0;min-width:0;width:100%;height:100%" width="560" height="315" src="https://www.youtube.com/embed/gANPXn2rlXg?si=bQmICnUKkxRyWcK2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></div></div>実際に貼り付けた例
修正した埋め込みコードでYouTube動画を貼り付けると・・・、
このように、スマホ画面の左右にはみ出さず、他の文字と同じ記事の幅にピッタリ合うようにYouTubeの動画を貼り付けることができます。
もちろん、パソコン表示でも記事幅ピッタリのサイズできれいに表示されます。
アメブロにも貼り付けてみましたので、もしよろしければ確認してみて下さい。
問題点は？
ただし、実はまだ少々問題が残っています。
実は、Amebaアプリで表示した際に、少しだけ下方向にズレます。
理由はまだよくわからないのですが、このズレの影響で、動画の下にピッタリくっつけて文字を書くと、一部隠れてしまいます。
なので、この方法でYouTube動画を貼り付けた場合は、動画の下に1行以上空けて次の文を書く必要があります。
大きな問題ではないと思いますが、一応は、現時点での問題点としておきます。
まとめ
以上、YouTube動画をアメブロに貼り付けた時に、スマホ版ブラウザでは画面から左右がはみ出してしまい、パコソンではサイズが足りずに横に隙間ができてしまうという問題への対処方法をご紹介しました。
まだ少々問題は残ってはいますが、対処前と比較するとかなり改善すると思いますので、よかったら参考にして下さい。
なお、この動画は、随分前に私がYouTubeにアップロードしたもので、当記事作成時点で高評価が3の動画です（恥）
