YouTube動画をレスポンシブで埋め込む

YouTubeを埋め込む

YouTubeなどのiframeの埋め込みは「共有」ボタンの埋め込みコードをコピーします。
iframeの埋め込みをレスポンシブになるように変換してくれる EMBED Responsiviely がとっても便利です。
こちらのサイトに該当動画の埋め込みコードではなくURLをコピーして貼り付けるだけ。生成してくれたコードをカスタムHTMLにペーストします。

GoogleMapsもiframeなので、同様に変換したらこんな感じです👇

GoogleMaps

Vimeo

Barcelona GO! – A Rob Whitworth Timelapse from Rob Whitworth on Vimeo.

Vimeoは埋め込みコードを生成するときに「レスポンシブ」を選択すると◎です。さきほどのサービスは使ってません。

SHARE

  • *
  • *
  • *