ワンクリックで簡単にYoutubeやvimeoの埋め込み動画をレスポンシブ対応させる方法


動画をYou-Tubeにアップした後、その動画をブログやwebサイトに埋め込む際、サイズを自動的に調整してくれる
「レスポンシブ対応」だとスマホでもタブレットでも見やすいですね。 

ここではワンクリックで簡単にYou-Tubeやvimeoの動画の「レスポンシブ対応」埋め込みコードを表示させる方法をご紹介します。※7月にアップしたYou-Tube動画を例にしています。

埋め込みコード」ってなに?という方は、先に「通常の埋め込みコード」を表示させる方法を押さえておきましょう。

「レスポンシブ対応埋め込みコード」にすぐに行ける方はこちらへ

You-Tubeの動画 通常の埋め込みコードは?

①埋め込みたい動画の「共有」ボタンをクリック

②共有ウィンドウの「埋め込む」ボタンをクリック

③埋め込みコードが表示される。(既にサイズが決定しています)

サイズを変更したい場合は、この部分の数字を変えれば良いです。そして、自動調整するにはこの埋め込みコードを基にコードを書き換えてもOKです。・・

コードを書き替えるって、面倒ですよね?

そこで、こちらのサイト「Embed Responsively」を利用します

You-Tubeの動画 レスポンシブ対応埋め込みコードは?

①まず、You-Tubeで「共有リンク」をコピーします

②「Embed Responsively」ページでのYou-Tubeタブを選択。「You-Tube page URL」の欄に、先ほどコピーしたURLを貼り付け「embed」をクリックします。

③プレビューの下に「レスポンシブ埋め込みコード」が表示されます。このコードをコピーして使いましょう。

ここではYou-Tube以外にも複数のレスポンシブ対応埋め込みコードが作れます。私はこれまで専らvimeoを利用していましたので、頼りにしていました。Google map、Twitterも利用できるようです。プレビュー画面があるのも親切ですね。うっかり違う動画を処理することも防げます。

 

受講生サポート情報はメルマガでご案内しています

関連記事

  1. you-tubeに講師力アップチャンネルを開設しました。

  2. 20191227開催「レクチャー動画作り」part2 女性限定★~20…

  3. 説得力ある話し方の基礎 おすすめ本#02 「理科系の作文技術」

  4. 20190726開催_スキルアップ勉強会レポート「ZOOMの録画ファイ…

  5. 研修講師・セミナー講師への おすすめ本#03 「自分で気づかない ココ…

  6. セルフコーチング おすすめの本#01「繊細な女性のための大胆な働き方 …

  7. GarageBandで簡単にiMovieのBGMを作る方法

  8. お勧めの本#04 「隠れた脳~好み、道徳、市場を操る無意識の科学」