YouTube動画の表示サイズを縮小してブログ記事に入れる方法



WordPressの記事にYouTubeの動画を入れる場合、動画の表示サイズが大きすぎて、スマホでの表示がモバイルフレンドリーにならない場合があります。

これはテーマなどのデザインの関係で、レスポンシブWebデザインなどになっている場合、スマホの小さい画面でも、そのまま表示サイズで動画が再生できるようになっているためです。

記事の公開上としては、それでも問題はないのですが、他の画像(写真類)は、スマホ画面サイズになっているのに、動画だけが大きなサイズになっていると言う現象となります。
この場合は、検索エンジンがモバイルフレンドリーではないと考えてしまう可能性も捨てきれないので、可能であれば、動画の表示サイズもスマホ画面で表示されるケースを最初から想定して記事中に入れると良い訳です。

もともとの動画のサイズを縮小してくださいと言う訳ではなく、単に記事にて表示される最初のサイズ(動画の縦横の大きさ)を変更して記事に入れると言う事になります。
パソコンの大きな画面では、動画が小さく見えますが、今やアクセスの60%程度はスマホからですので、スマホを重視した表示にしておくのは、悪い事ではありません。

下記の方法は私が取っている方法ですので、必ずこの方が良いと言う事ではないのですが、ひとつの方法としてご紹介致します。

(1)記事に入れたいユーチューブの動画へ直接アクセスします。(YouTube側の画面です。)

(2)その動画にある「共有」の部分をクリックすると、その直下に表示される「埋め込みコード」に進みます。

(3)そのまま埋め込みコードを入れると元のサイズのため、コードをコピーする前に、サイズ変更するため「もっと見る」をクリックします。

(4)新たに表示された項目にある「動画のサイズ」より「カスタムサイズ」を選択して、表示したいサイズを指定します。

 私の場合には、だいたい、横300ピクセルにしています。最初の枠に「300」と入力すると、右横の数値は自動で計算されますので、左側の横ピクセルだけ指定すればOKです。
 300と言う数値は、ご自身で表示したいサイズにして頂いて構いませんので、300に拘る必要はありません。
 5インチ画面でしたら、320位でも大丈夫かと存じますが、小さなスマホ画面だと320は、はみ出るかも知れません。

 下記は見本ですが、パソコンでクリックすると拡大致します。

(5)その数値を指定すると「埋め込みコード」の部分のwidth(横の幅)の数値も、300など指定した数値に変わっていると存じます。

 この横幅を変えたあとに「埋め込みコード」をコピーしてください。

(6)コピーした「埋め込みコード」を、WordPressの記事編集の「テキスト状態」にて、ペースト(張り付け)すればOKです。

 あとは記事の保存(更新)を行ってください。

 もちろん、記事を作った後には、スマホでも問題がないか、慣れないうちは確認しておくと良いです。

なお、上記の動画のサイズを縮小なり、拡大なり、自由に大きさを変えて入れる方法は、WordPress以外のブログなどでも応用できますので、付け加えておきます。

閲覧ありがとうございます。ご参考になりましたでしょうか?
  • 参考になった 
  • 普通だった 
  • すごく良かった 




5万文字以上のブログ収入を得る為の「実践バイブル」を創刊致しました。
読切タイプの参考本的な内容です。詳しくは下記をご参照願います。
takada式「ブログで収入を得る実践テクニック」(適時追加あり)

無料でブログ・サイトの「アクセス向上」を狙うノウハウマガジンです。
無料購読可能→いつでも購読中止できるnoteにて無料配信中。
takadaのブログで収入講座(無料版)

takada素浪人

投稿者プロフィール

お忙しい中「脱藩起業」をご覧頂きまして深く御礼申し上げます。
現在、サイト運営の広告収入のみで生活している個人事業主で、2016年はお陰様で、運営サイト全体数値ですが5000万PVを達成致しました。
このサイトにてアドセンス広告は掲載しておりませんが、WordPressを使用したアフィリエイトや広告展開、そして愚痴などを中心に言いたいことも掲載させて頂いております。
もしよろしければ、Facebook・Twitterなどでご感想やご質問など賜りますと嬉しいです。(^-^)
あと採算度外視で「ブログで稼ぐオンライン・ブログ塾」も始めました。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメントするためには、 ログイン してください。

Twitter でフォロー

note
takadaの読み切りバイブル


【A8.netに登録しよう!】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
アフィリエイトならA8.net
ページ上部へ戻る