ネットビジネス

Youtubeをブログに埋め込みスマホ対応する2つの方法

西野榮祐 にしのえいすけこんにちは
西野 榮祐(えいすけ)です。

いつも見に来てくれる方、そして初めての方ありがとうございます!直接お礼をしたいです😜

今日は、ネットビジネス&グーグルアドセンスに役立つノウハウをプレゼント贈ります。

あなたは、7秒でYoutubeをブログ記事に埋め込みスマホサイズにする方法、を知りたいですか?

しかもスマホの動画サイズを正方形と長方形の2パターンの設置方法をご紹介します。私みたいなhtml、cssとかよくわからない初心者には最高です。

ちなみに私はアメブロではなく、ワードプレスを活用しています。それは一緒に見ていきましょう😉

基本編:ブログにYoutubeを埋め込む方法

まずは最もシンプルな基本編です。色んな方々の記事に記載されていると思います。ご存知の方は、次に項目に移動してください。

方法:共有⇒埋め込み⇒赤枠でコードをコピペ⇒ブログ記事のテキストに貼り付け⇒完了。

しかし、パソコンから見るとサイズはOKですが、スマホサイズでは横幅がはみ出してしまいます。

Youtubeをブログに埋め込みスマホサイズ設置
Youtubeをブログに埋め込みスマホサイズ設置
ここまでは基本編です。次は、Youtube動画をスマホサイズにしてブログ記事に埋め込み設置する方法です。

正方形にYoutubeを埋め込みスマホ対応

中級編では、Youtubeをスマホサイズに自動最適化し、ブログに埋め込み設置する方法です。完成イメージは、スマホで見るとYoutube動画が正方形になります。

方法:赤枠のコードをコピペ⇒横幅を100%に変更⇒ブログ記事のテキストに貼り付け⇒完了。

具体例を、私の動画を使って説明します。動画は本記事と無関係のため、再生しなくても結構です😊


正方形の完成イメージです。動画内容は、記事と無関係です。パソコンから見ると長方形ですが、スマホから見ると正方形になっていることを確認して頂ければと思います。ちなみに動画は私です😅

スマホサイズで動画を正方形に設定したい方は、この方法で行ってください。この方法だと、スマホ画面の半分の面積を占めます。

もしブログ記事のコンテンツ文章を多く見せたいという方は、次の長方形に埋め込む方法をご覧ください。

長方形にYoutubeを埋め込みスマホ対応

こちらの方法は、スマホから見ると、Youtube動画の形が長方形になります。少しコンパクトになります。私は、スマホ画面で、他の文章コンテンツを多く見せたい派なので、この方法を使ってます。

方法:共有⇒赤枠URLをコピペ⇒Embed ResponsivelyでYouTube Page URLに入力⇒Embedをクリック⇒コードをブログ記事のテキストに貼り付け⇒完了。

便利ツール:Embed Responsively

Youtubeをブログ記事に埋め込み

長方形の完成イメージです。動画内容は、記事と無関係です。パソコンから見ると長方形です。そしてスマホからも見ると長方形になっていることを確認してください。ちなみに動画は私です😅

 

目的に合わせて選ぼう!

私は、Youtube動画を長方形で埋め込み、動画の下にアドセンスを設置します。ランディングページなど大きく見せたい場合は、正方形でいいかもしれません。

私のようなCSSというキーワードが出た瞬間に思考停止する方もいるかもしれません。だから今回の7秒方法がお役にいただければ嬉しいです。

最後までご覧いただきありがとうございます😄
西野 榮祐(えいすけ)

(Visited 27 times, 1 visits today)

あなたも最新情報を手に入れませんか?
Yes!の人は「いいね ! 」をクリック

関連記事

  1. ネットビジネス

    ネットビジネス初心者が”地獄に落ちないための心構え”とは?

    こんにちは、西野です。あなたがネットビジネスで稼いで成功したい…

  2. ネットビジネス

    ネットビジネス起業・副業で「稼げる儲かる分野・市場」とは?

    こんにちは、西野です。今回は、「どの分野・市場で起業副業するか…

  3. ネットビジネス

    ♯④有望客を集めるための広告メディア媒体の選び方

    現在、あなたが活用しているメディア媒体は何を使っていますか?…

  4. ネットビジネス

    ♯⑤”伝え方×伝える角度”で人を動かす広告販売テクニック

    あなたはこのようなご経験はありませんか?・商品サービスの魅力・強み…

  5. ネットビジネス

    ♯②成功する確率を大きく左右するターゲット設定の重要性

    質問です。 あなたが初めて訪れた街で「ラーメン(醤油)」を食べたい…

  6. ネットビジネス

    ♯③お客の心を動かす「伝え方」を成功させるためのヒント

    思い出してください。 あなたは、現在のパートナー(夫・妻・恋人・仕…

コメント

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

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

Please Join Me On SNS!!

サイト内検索(キーワード記入)

PAGE TOP