ホームページ制作のライフスタイルクリエイターズ|神田翼|フリーランスWebデザイナー

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

スポンサーリンク

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

久々になってしまいましたが、便利な情報を書いておきます。 どうも、WEBデザイナーの翼(@lsc_design)です。 ブログや、WebサイトにYoutubeの動画を埋め込んでいる方は多いと思います。 埋め込むのも簡単で、誰でもできます。 ただ、あのYoutubeが!あの!Youtubeが! 埋め込み動画は、レスポンシブ対応してなんですね。 なんでなん!?といつも思っていますが、僕があーだこーだ言ってもどうしようもないので、 便利なツールを発見しました。

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

Embed Responsively このサイトにアクセスして、Youtube動画の該当ページのURLをコピー&ペーストすれば、 勝手にレスポンシブ用のコードが生成されるので、そのコードをページ内に貼ってしまえばOKです。 簡単ですね。一応、やり方も書いておきますね。

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

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

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

Embed Responsivelyにアクセスする 20160308_img07

3.生成されたコードをコピーする

20160308_img08

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

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

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

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

スポンサーリンク

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

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

関連記事

最新の記事一覧