YouTube動画などのWebコンテンツの埋め込みはサービスは埋め込みコードを提供し、貼り付けるだけなので、非常に簡単です。問題は、レスポンシブデザインのウェブサイトにリンクを貼り付けた場合、埋め込みコード自体がレスポンシブではないため、ビデオフレームのサイズが変更されないことです。 Googleマップ、Vimeo、Instagramの埋め込みについても同様です。方法がわかっている場合は、いつでも自分でコードを編集してレスポンシブにすることができますが、はるかに速く簡単な方法は、 レスポンシブに埋め込む。これは、YouTube、Vimeo、Googleマップ、Instagramなどのサービスのコンテンツにレスポンシブな埋め込みコードを提供することを目的としたWebアプリです。
Embed Responsivelyの使い方は簡単です。 まず、Googleマップ上の場所、YouTubeやVimeo上の動画、Instagram上の写真や短い動画など、埋め込む対象を見つける必要があります。サービス自体の機能から埋め込みコードをコピーする必要はありません。そのページのURLをコピーするだけです。次に、Embed Responsivelyにアクセスして、利用可能なオプションから同じサービスを選択します。
サービスからコピーしたURLを貼り付け、[埋め込み]ボタンをクリックします。埋め込むビデオ、地図、または画像のプレビューと、その下にレスポンシブ埋め込みコードが表示されます。これで、他の自動生成された埋め込みコードと同じように、埋め込みコードをWebサイトに貼り付けるだけで、応答して機能し、画面サイズに応じてサイズが変更されます。
言うまでもなく、レスポンシブ埋め込みコードをウェブサイトで宣伝されているとおりに機能させるには、ウェブサイト自体にレスポンシブデザインを用意する必要があります。そうでなければ、レスポンシブ埋め込みコードを使用しても意味がありません。これは、画面サイズの変化を検出する必要があるのがWebサイトだからです。リンクを貼り付けてからブラウザウィンドウのサイズを変更することで、Embed ResponsivelyのWebサイト自体でコードをテストできます。ウィンドウのサイズを変更すると、そこで生成されたプレビューのサイズが変更されます。また、ウィンドウの端にくっつかないように注意し、両側にパディングを残します。
埋め込みを知って驚く人もいるかもしれません
Embed Responsiveにアクセス
[次のWeb経由]
コメント