ライフスタイルクリエイターズ

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

久々になってしまいましたが、便利な情報を書いておきます。
どうも、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の場合は、「ビジュアル」ではなく「テキスト」に表示方法を変えましょう。

スポンサードリンク



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



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

以上。

トップへ戻る