YouTube動画の埋め込み「はみ出し」を一瞬で直す方法

自分のホームページやブログなどに参考になるYouTube動画を貼り付けることがあります。パソコンでは上手く表示されるのに、スマホで見るとはみ出してしまうという症状が起こることもあります。

スマホで右側半分だけでは紹介したい動画を楽しんでもらえない。

困りますよね。これは使用しているブログサービスやWordPressのテンプレートがスマホ対応（レスポンシブ）になっていても発生する場合があります。

慣れている方だと、埋め込みコードをその場で直せますが初心者は毎回調べる必要があり面倒になってしまします。今回はYouTube埋め込みのはみ出しを簡単に、そして一瞬で直す方法を紹介します。

YouTube動画の埋め込みをレスポンシブにする方法

①CSSに以下のコードを入力する

準備はこれだけです。超簡単でしょう！

そして記事を書くときに埋め込みを行いますが、

<div class=”youtube”>『埋め込みコード』</div>（すべて半角で）

としてあげればよいです。

YouTubeをブログに貼り付ける方法

YouTube動画をブログに貼り付ける方法を紹介しておきます。

YouTubeの再生画面で右クリックを押すと、下の黒いタグが出てきます。赤枠で囲った「埋め込みコードをコピー」を押してください。

この操作だけで埋め込みコードの取得はできるはずです。

<iframe width=”854″ height=”480″ src=”https://www.youtube.com/＃＃＃></iframe>のようなコードが取得できるはずです。

記事のテキスト編集画面に貼り付けるだけで埋め込み出来ます。

簡単ですね。是非ブログにあなたが気に入っている動画を共有してあげてくださいね。

Googleマップの埋め込みのはみ出しの解決法

質問をいただきましたので、こちらに合わせて入れておきます。

グーグルマップも埋め込みコードをそのまま入力するとタブレットやスマホで見るとはみ出してしまうことがあります。パソコン画面でも本来のメインカラムからはみ出してしまったり、なかなかのじゃじゃ馬ですね。

サイズを都度入力すれば良いのですが、携帯端末によって相性が悪く

小さすぎるよ…

となる場合も。こうなると画面を広げようとするのですが、埋め込まれた地図が拡大されたりとなかなか大変です。

ブログにグルメ情報や店舗情報など、地図を載せる方のためにGoogleマップのレスポンシブ対応のやり方を紹介します。初心者の方でも簡単に綺麗に直すことができる設定方法なので、面倒がらずに最初に設定してしまいましょう。

Googleマップのレスポンシブ｜ブログに貼り付ける方法

まずはCSSに以下を、

.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

そして記事投稿画面のテキスト編集中の埋め込みたい位置に

<div class=”gmap”>iframeのコピーしたコード</div>

と貼り付けてあげれば大丈夫です。