西野栄祐 公式ブログ

★文末にプレゼント情報アリ★

こんにちは西野 栄祐です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

便利ツール：Embed Responsively

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

目的に合わせて選ぼう！

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

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

最後までご覧いただきありがとうございます😄

P.S.①

P.S.②
LINE@限定コラムを毎日配信中^^
今、お金を稼ぐアイデアをamazonで発見する方法をプレゼントしています。
▼クリックで追加 ID検索は「＠eisuke」▼