【WordPress】YouTube動画をレスポンシブサイズで埋め込む方法をやってみた

公開日: : 最終更新日:2018/09/25 YouTuberとして , ,

スポンサーリンク

2018年、年の始めからワードプレスを使用した独自ドメインによるブログを運営してきておよそ半年が経過しました。
開設すること自体ボクにとってはとぉ~っても(汗)大変な作業だったんですが、これまで試みようとしてはあきらめていたことがあります。

それが今回のタイトルにも表記した通り、YouTube動画をこのブログでレスポンシブに表示することです。
「レスポンシブ」とは異なる大きさのスクリーンに、それぞれ自動で対応して適切な大きさで表示してくれる便利な機能のことで、アドセンス広告などにも備わっているようです。(ボクはしてません)(笑)

最近ネットでいろいろ調べていましたら難しいcssを使用しなくてもプラグインでそれができるようでしたので、思わず飛びついてやってみました、というか今まさにこの記事で実験をしております(笑)

設定方法

まずはワードプレスのプラグインから「AddQuicktag」を検索して、インストールし有効化。
続いて「設定」→「AddQuicktag」で下記のように設定します。

①ラベル名:「YouTubeレスポンシブ」

②開始タグ:

③チェック印にチェック(すべての項目にチェックが入る)

最後に設定を保存して完了です。

使用方法

次に実際に使用する方法をお伝えします。作業自体はコピペだけになるのでとても簡単です。

スポンサーリンク

スポンサーリンク

まずは貼り付けたいリンクをゲットします。
①お望みの動画の「共有」ボタンをクリック。

②表示されたコードをコピー

続いて投稿欄へ。
設定が完了するとテキスト欄外に新しくボタンが追加されます。

新しく追加されたボタンをクリックすると先程設定したタグが貼り付けられます。
そこにある「YouTube埋め込みコード」の部分だけをコピーしたコードに置き換えます。

するとレスポンシブ処理された埋め込みコードが完成です。

上記の通りやってみました↓

ちなみにいつもはリンクを貼り付けていただけでしたのでこんな感じです↓

パソコンではあまり差がないのかもしれませんがタブレットやスマホなどでこの差は歴然だと思います。
※追記、現在スマホで確認したところ、横画面では対応していましたが、縦画面では対応しませんでした(汗)
今後も調査していきます。

これまでPC言語に疎いので敬遠していましたが(汗)プラグインの機能を利用して最小限の労力でこの作業が可能になりました。
ぜひ活用したいと思います!



↓注目記事シリーズ

【ネットでビジネス】肉体労働者が不労所得を得るまで①いきさつ編
【ネットでビジネス】肉体労働者が不労所得を得るまで②事業不振編
【ネットでビジネス】肉体労働者が不労所得を得るまで③無料ブログ編
【ネットでビジネス】肉体労働者が不労所得を得るまで④YouTube編

スポンサーリンク

◆YouTubeで作業の手助けになる動画をたくさん作ってます


「ひとり親方ユーチューブ」チャンネルはコチラをクリック

「勉強になったな~」「ぜひトライしてみよう!」と共感して下さった皆様!よかったら↓ポチってランクアップのご協力をお願いいたします!(`・ω・´)ゞ

造園業・植木屋ランキング

            

関連記事

【Youtube】視聴者に分かり易く伝える方法

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネルを運営しています「ひとり親方

記事を読む

ベンジャミン・フランクリンの「時間の捉え方」に共感した

以前に「時は金なり」の記事で彼について紹介しました。学校で勉強したんだろうけど、当時も不真面

記事を読む

【googledrive】グーグルドライブで情報を共有する方法

タイトルにあるように今回はネットを介してデータを共有する方法についてお伝えします。 ユ

記事を読む

YouTubeを始めるための必要な機材

初心者がYouTubeを始めるために勧める機材 ボクはキャンプやアウトドア、テントや

記事を読む

ブロガーYouTuberの備忘録法アイデアはすぐに「残す」

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネルを運営しています「ひとり親方

記事を読む

【YouTuberの階層別の分布】傾向について考えてみた

自分のYouTubeチャンネルの規模がどれくらいのものなのだろう?と思われたことはありません

記事を読む

マルチチャンネルネットワーク【MCN】UUUMネットワークに加入する価値を考えた

ボクは1年ほど前からMCN(マルチチャンネルネットワーク)に加入しました。 MCNとは端的

記事を読む

YouTube【成功に欠かせない】時間の使い方

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネルを運営しています

記事を読む

YouTube人気動画の秘訣【付加価値】をつける大切さ

久しぶりに動画表示どうなってんだろ?と思って「ひとり親方ロープワーク」ボクのチャンネルで人気

記事を読む

検索上位するためSEO検証した結果Google検索上位に!

ヒット作なのに・・ 昨年(2017年)秋ごろに公開した動画がおよそ半年ほどで100,

記事を読む

Comment

  1. […] ★ブロガーとしてPV数を上げるために取り組んでいること★ →サーチコンソールを使ってブログの改善を図る →ブログのリライトでまずやるべきこと →ブロガーTouTuberの備忘録法アイデアはすぐに「残す」 →【WordPress】YouTube動画をレスポンシブサイズで埋め込む方法をやってみた […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

【成功するためには「行動」が大事】マナブさんの動画を見て感じたこと

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネ

【仕事現場で役立つ】フックにロープを簡単に結ぶ便利な方法

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネ

仕事や引っ越しで役立つロープの結び方

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネ

【キャンプや釣りで役立つ結び方】巻きもやい結びの方法

ロープの結び方をメインに「ひとり親方ロープワーク」YouTubeチャン

【台風・地震・津波】災害から家族を守る3つの考え防災マインド

ロープワークをメインに「ひとり親方ロープワーク」YouTubeチャンネ

→もっと見る




    • 800681総閲覧数:
    • 613000総訪問者数:
  • 植木屋として20年以上仕事をしていますが、これまでに積み上げてきたスキルや自身で考案した結び等、生活に役立つ情報を配信していきます。

  • 個人情報の保護について

    「http://hitorioyakata-blog.com/」(以下、当サイト)を利用される方は、以下に記載する諸条件に同意したものとみなします。

    個人情報の収集について

    利用者は匿名のままで、当サイトを自由に閲覧する事ができます。お問合せ等、場合によっては、利用者の氏名やメールアドレスなどの個人情報の開示をお願いする事があります。しかし、利用者の個人情報を利用者の許可なく、当サイトから第三者へ開示・共有する事はありません。

    広告の配信について

    当サイトはGoogle及びGoogleのパートナーウェブサイト(第三者配信事業者)の提供する広告を設置しております。その広告配信にはCookieを使用し、当サイトを含めた過去のアクセス情報に基づいて広告を配信します。
    DoubleClick Cookie を使用することにより、GoogleやGoogleのパートナーは当サイトや他のサイトへのアクセス情報に基づいて、適切な広告を当サイト上でお客様に表示できます。
    お客様はGoogleアカウントの広告設定ページで、パーソナライズ広告の掲載に使用される DoubleClick Cookie を無効にできます。また aboutads.info にアクセスして頂き、パーソナライズ広告の掲載に使用される第三者配信事業者のCookieを無効にできます。
    その他、Googleの広告における、Cookieの取り扱いについての詳細は、Googleのポリシーと規約ページをご覧ください。

    ウェブサーバの記録

    当サイトのウェブサーバは、利用者のコンピュータのIPアドレスを自動的に収集・記録しますが、これらは利用者個人を特定するものではありません。利用者が自ら個人情報を開示しない限り、利用者は匿名のままで、当サイトを自由に閲覧する事ができます。

    免責事項

    利用者は、当サイトを閲覧し、その内容を参照した事によって何かしらの損害を被った場合でも、当サイト管理者は責任を負いません。また、当サイトからリンクされた、当サイト以外のウェブサイトの内容やサービスに関して、当サイトの個人情報の保護についての諸条件は適用されません。 当サイト以外のウェブサイトの内容及び、個人情報の保護に関しても、当サイト管理者は責任を負いません。

    ひとり親方のブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

%d人のブロガーが「いいね」をつけました。
PAGE TOP ↑