ホームページ制作ノウハウ

2016/03/09 2018/03/29

Youtubeを埋め込んでレスポンシブ対応にするにはEmbed Responsivelyが便利！

スポンサーリンク

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

久々になってしまいましたが、便利な情報を書いておきます。
どうも、WEBデザイナーの翼(@lsc_design)です。

ブログや、WebサイトにYoutubeの動画を埋め込んでいる方は多いと思います。
埋め込むのも簡単で、誰でもできます。

ただ、あのYoutubeが！あの！Youtubeが！

埋め込み動画は、レスポンシブ対応してなんですね。
なんでなん！？といつも思っていますが、僕があーだこーだ言ってもどうしようもないので、
便利なツールを発見しました。

埋め込み動画をレスポンシブ対応に！Embed Responsivelyが便利

Embed Responsively

このサイトにアクセスして、Youtube動画の該当ページのURLをコピー＆ペーストすれば、
勝手にレスポンシブ用のコードが生成されるので、そのコードをページ内に貼ってしまえばOKです。

簡単ですね。一応、やり方も書いておきますね。

１．埋め込みたい動画のURLをコピーする

20160308_img09

動画は僕の好きな「旅する鈴木」のウユニ塩湖の動画です。きれいっ。。。

２．ページを開き、コピーしたURLをペーストする

Embed Responsivelyにアクセスする
20160308_img07

20160308_img07

３．生成されたコードをコピーする

20160308_img08

４．コピーしたコードを該当ページに貼り付ける

20160308_img10

※WordPressの場合は、「ビジュアル」ではなく「テキスト」に表示方法を変えましょう。

レスポンシブ対応の動画を貼ってみます

画面幅を手動で変えてみてください。一緒に動いて変わると思います。
便利なので使ってみてください。

以上。

スポンサーリンク

デザイナー/フリーランスパパ＠神田翼

フリーランスのWebデザイナーの神田翼です。２児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

関連記事

最新の記事一覧