Affiliate Re:Life

アフィリエイトで最高の人生を取り戻す(リライフする)方法についてご紹介します。

※PR

YouTube

YouTubeの埋め込み動画をスマホサイズに調整する2つの方法!

更新日:

この記事では、YouTube埋め込み動画を、スマホサイズに調整する方法!について解説していきます。

先日ですが、ブログを始めた知り合いから、

YouTube動画をWordPressへと埋め込みしたら、スマホで見たときに動画の右側が切れるんだけどどうしたらいいの?

と、こんな相談をされました。

確かに、多くの人がスマホで見ている現代で、スマホで埋め込み動画が見にくいと離脱されそうで不安ですよね。

これ結論からお伝えしますと、

  • YouTubeの埋め込み動画を、スマホサイズに調整する方法はコチラの2つがあります。

スマホサイズに変更する方法

  • レスポンシブ対応のテーマ(テンプレート)を使う
  • スマホサイズに合うコードを貼り付ける

それでは詳しく見ていきましょう。

スポンサーリンク

目次


サブスク自動集客ツール

「売り上げが伸びない…。」など、集客ができずに悩んでいませんか?

ツールをポチッとするだけでほったらかしで集客できてしまうツール。

月間7,500万人以上が利用しているアメブロからあなたのブログへ、自動で集客する方法に興味がある方におすすめです。

→ ほったらかしでも集客できるツール

 

YouTubeの埋め込み動画をスマホサイズに調整する2つの方法!

YouTubeの埋め込み動画を、スマホサイズに調整する方法はコチラの2つがありましたね。

スマホサイズに変更する方法

  • レスポンシブ対応のテーマ(テンプレート)を使う
  • スマホサイズに合うコードを貼り付ける

それでは1つ1つ見ていきましょう。

1.レスポンシブ対応のテーマ(テンプレート)を使う

YouTube動画をスマホサイズに合わせる方法で、最も安全で簡単なのが「レスポンシブデザインに対応したテーマ(テンプレート)」を使う方法です。

この、「レスポンシブデザイン」とは、スマホやPCなどそれぞれの画面で見たときに、画面サイズが調整されて見やすい表示になっているという意味です。

つまり、レスポンシブデザインに対応している、WordPressテーマ(テンプレート)を使えば、スマホで見たときに下記のように動画が綺麗に表示されるのです。

テーマ(テンプレート)は「無料」で大丈夫!

WordPressのテーマ(テンプレート)は、

無料のテーマ

  • STINGER(スティンガー)
  • Simplicity(シンプリシティ)

など、無料で使える有名なテーマ(テンプレート)を使えば問題ありません。

有料じゃなくても、無料で十分対応していますので、気になるテーマ(テンプレート)を使われてみてください。

無料テーマ一覧!


無料で使えるおすすめのWordPressテーマ(テンプレート)に関しましては、「アフィリエイトでおすすめな無料WordPressテーマ5選!」こちらで詳しく解説していますので参考にされてください。

2.スマホサイズに合うコードを貼り付ける

YouTubeの埋め込み動画の前後に、専用にコードを貼り付けるだけで簡単にスマホサイズに調整できるのです。

具体的には、YouTube動画の埋め込みコードの前後に、

スマホサイズに合わせるコード

<div class=”video”>
ここに動画の埋め込みタグを入れる
</div>

と、上記の赤字の部分を動画の前後に貼り付けるだけで大丈夫です。

コードを貼る方法

詳しいコードを貼る手順はコチラになります。

コードを貼る手順

  1. WordPressを開いて「投稿」→「新規追加」をクリックする
  2. 「テキスト」→「スマホサイズに合わせるコード」を貼り付ける
  3. YouTubeから動画の埋め込みタグをコピーする
  4. コピーした動画の埋め込みタグを「ここに動画の埋め込みタグを入れる」部分に貼る

それでは1つ1つ見ていきましょう。

step
1
WordPressを開いて「投稿」→「新規追加」をクリックする

まずは、WordPressへログインをして、左のメニューにあります、

  1. 「投稿」をクリック
  2. 「新規追加」をクリック

の手順で、クリックして進めていきましょう。

step
2
「テキスト」→「スマホサイズに合わせるコード」を貼り付ける

記事作成画面が開いたら、

  1. 「テキスト」をクリック
  2. 下記にある「スマホサイズに合わせるコード」をコピーして貼る

と、進めていきます。

スマホサイズに合わせるコード

<div class=”video”>
ここに動画の埋め込みタグを入れる
</div>

step
3
YouTubeから動画の埋め込みタグをコピーする

次は、YouTubeからWordPressへと貼り付けたい動画の、埋め込みタグをコピーしましょう。

YouTubeでの動画の埋め込みタグの取得手順はコチラになります。

埋め込みタグの取得手順

  1. ブログへ貼り付ける動画の「共有」をクリックする
  2. 「<>(埋め込む)」のアイコンをクリックする
  3. 右にある「動画の埋め込みタグ」をコピーする
  4. WordPressの「投稿」→「新規追加」をクリックする
  5. 「テキスト」をクリックして「動画の埋め込みタグ」を貼り付ける
  6. 記事を更新して動画をチェックする

上記の、YouTube動画の埋め込みタグの取得方法に関しましては、「YouTube動画をブログへ貼る方法!【簡単6ステップ】」こちらで詳しく解説していますので参考にされてください。

step
4
コピーした動画の埋め込みタグを「ここに動画の埋め込みタグを入れる」部分に貼る

YouTubeで埋め込みタグをコピーしましたら、WordPressで貼り付けた「スマホサイズに合わせるコード」の、「ここに動画の埋め込みタグを入れる」部分に貼り付けたら完了です。

【注意!】YouTubeのタグを変更してスマホサイズにするのはダメ!

YouTubeでは動画の埋め込みタグの変更を禁止しているため、タグを変更してサイズ調整はしないようにしましょう。

下記のように、YouTubeで取得した動画の埋め込みタグの、

YouTubeの動画埋め込みタグ

<iframe width="560" height="315" src="https://www.youtube.com/embed/xtoiqh2NQow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上記の赤文字の「560」の数字を、「100%」などに変更することで、スマホでもPCで見たときでもサイズが統一されるのです。

しかし…。

埋め込みタグを提供している、YouTubeがタグの変更自体を禁止しているため、この方法でサイズ調整するのは危険です。

ですので、取得したYouTubeの埋め込みタグを変更しない、上記2つの方法でスマホサイズに調整するのが安全なのです。

YouTubeの埋め込み動画をスマホサイズに調整する2つの方法!のまとめ

まとめますと、

まとめ

  • レスポンシブ対応のテーマ(テンプレート)を使うだけ!
  • テーマ(テンプレート)は無料のもので大丈夫!
  • スマホサイズに合うコードを貼り付けるだけ!

以上が、YouTubeの埋め込み動画をスマホサイズに調整する2つの方法!についてでした。

是非、意識してチャレンジしてみてください。

スポンサーリンク

-YouTube

Copyright© Affiliate Re:Life , 2024 All Rights Reserved.