YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!)

「売れる」ウェブサイトを手に入れるため、最初に知っておくべきこと
成果の出ている「売れる」ウェブサイトが持つ、5つの要素をご存じですか?ウェブサイトを作るなら、まず初めにこれを確認して下さい。
Table of Contents

商品・サービスの使用方法やトレーニングフォームなど、顧客が「正しく・効果的に」実践する上で最も分かり易い情報は動画です。正直、テキスト+画像の情報では太刀打ち出来ません。

従い、ウェブサイトのコンテンツもYouTubeなどの動画を効果的に使っていく必要があります。

ただ、注意点があります。サイトの投稿にYouTube動画をアップする場合、単にYouTubeのURLをコピペするだけでは表示不具合が発生する場合があるのです。

よくあるワナは、カラム幅いっぱいで表示されなかったり、スマートフォンで閲覧した時に動画がコンテンツ幅からはみ出したりすること。これでは、せっかく動画をアップした意味がありません。

実は、この投稿をアップする数日前に私がこのトラップにハマりました。
使っていたテーマは、TCDの「Switch」。

調べてみると、TCDテーマの場合は単なるコピペでは上手く表示されないようです。メーカーがTCDテーマでYouTube動画を最適なサイズで表示する手順を公開しているので、備忘を兼ねて紹介します。

1.事前準備

◎まずは下記サイトを開き、自分が使っているテーマのクイックタグ機能を確認します。

旧クイックタグ機能の使い方【基本的な使用方法と活用例】:ワードプレステーマTCD

TCDテーマの場合、クイックタグを使ってYouTube動画をレスポンシブ表示します。

TCDクイックタグには「A.テーマ同梱タイプ」「B.AddQuicktagプラグイン併用タイプ」の2タイプが存在しており、テーマによってタイプが異なります。

確認方法は簡単で、上記サイトを開き、自分が使用しているテーマ名をクリックするだけ。
確認したら次のステップへ進みましょう。

使用中のテーマが「A.テーマ同梱タイプ」の場合、特にやることはなし。「B.AddQuicktagプラグイン併用タイプ」の場合は上記記事を参考にプラグインのインストールなど、設定をしておく必要があります。

2.YouTube動画へアクセスし、埋め込みコードを取得する

まず、埋め込みたいYouTube動画へアクセス。画面下の「共有」というリンクをクリックします。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

「共有」リンクをクリックすると下図のようなポップアップが表示されるので、「埋め込む」をクリック。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

すると、下図のように埋め込みコードが表示されるので「コピー」をクリック。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

埋め込みコードが反転表示されればコピーは完了。次のステップへ進みましょう。

3.埋め込みコードをコンテンツに埋め込む

ここでは、私が使用しているTCDテーマ「Switch」で説明します(「OOPS!」も同じ)。

まず、投稿をテキストモードで開き、動画を埋め込みたい場所を選択します。
次に、投稿画面上部にある「YouTube」というボタンをクリック。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

するとTCDテーマ「Switch」や「OOPS!」の場合、下記の様なコードが書き込まれます。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

コード中の「ここにYoutubeのコードを入力してください」という箇所に、先程取得した埋め込みコードをペーストします。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

埋め込みコードをペーストしたら、一旦プレビューをクリックして出来上がりを確認します。

YouTube動画をレスポンシブ表示する方法(TCDテーマSwitch、OOPS!) DIY WordPress Site

これで作業は完了。YouTube動画をレスポンシブ表示出来る様になります。

おまけ:DIVERでYouTube動画を埋め込む方法

と、ここまで書いてきましたが、このサイトで使用しているWordPressテーマは「DIVER」。

DIVERの場合はどうかと言うと、基本的にTCDテーマと同じです。動画を埋め込みたい場所に埋め込みコードをペーストするだけ(ショートコードは無いので、そのままペースト)。

これだけでレスポンシブに対応した動画を埋め込むことが出来ます。
TCDと比べると、PC閲覧時は表示が小さめですが…

下の動画は、上記手順で埋め込んだものです。

2021/6/30追記:

久しぶりに当サイト(使用テーマ:DIVER)に動画を埋め込んだところ、ちょっと不具合発生。

不具合内容は、ブロックエディターの「YouTube」ブロックを使って動画を埋め込んだところ、スマートフォン閲覧時に動画上部に異様な広さのスペースが出来てしまうというもの。PC表示では普通に表示されるので、スマホで確認しないと分からないと思います。

事象発生時のWordPressバージョンは「5.7.2」です。

応急処置になるかもしれませんが、下記方法でこの投稿と同じような表示に復旧したので追記しておきます。

  • 手順1:「カスタムHTML」ブロックを選択
  • 手順2:ブロックに動画の埋め込みコードを貼り付け

スマホでサイトをチェックしたときに「動画の表示がおかしい、、、」という場合は試してみて下さい。

Recommends
あなたのメッセージやアイディアを形にする会員制スタジオ「Output STUDIO」がオープン。 ウェブページや動画など、ターゲットに届ける最終工程をしっかり形に仕上げ、顧客や見込み客に届けることが出来ます。 集客やセールスのスピード感が高まるので、数多くの施策を打てるようになります。また、都度外注するより圧倒的に安いので、コストの有効配分にもつながります。 「Output STUDIO」は会員限定での提供となります。詳細は公式サイトでご確認下さい。
Recent posts
これは見出しです
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Table of Contents

集客やセールスの「資産とスキル」が手に入る制作室
集客やセールスのスピードと精度を上げ、無駄なコストを抑えたいとお考えなら、STRATEGY SUPPLIERが運営する「Output STUDIO」に参加して下さい。 低コストでウェブサイトという「資産」と、構築・運用「スキル」を手に入れることが出来ます。 「Output STUDIO」は、高品質なサポートを提供するため会員制とさせて頂いており、参加人数を制限しています。 募集状況など、詳細は下のボタンをクリックしてご確認下さい。
松浦 臣吾
松浦 臣吾
マーケティングプロデューサー/コピーライター。STRATEGY SUPPLIER在籍。神奈川県在住。継続性にフォーカスしたマーケティング戦略の立案と実践を得意とする。成長し続けるビジネスの設計図「Business Design Method」を公開し、ビジネスオーナーへの精力的なサポートを行っている。
関連コンテンツ
Wordfence WAFトラブル対応履歴(202112)

Wordfence WAF設定で発生したトラブル事例と、その対処方法を紹介します。WAFのエラーが出っぱなしでお困りのWordfenceユーザーの方には、このコンテンツが問題解決につながるかもしれません。

Read More »