この無料アプリで簡単にレスポンシブ埋め込みコードを生成

すべてのWebデザイナーは知っています 動画を埋め込む方法. 埋め込みは、コンテンツを共有し、記事を改善するための最も簡単な方法です。.

しかし、iframeや他の同様のビデオ埋め込みには問題があります。 レスポンシブソリューションの欠如. 最近のすべてのサイトは完全にレスポンシブであり、固定ビデオは本当にモバイル上でその流れを打破することができます.

この問題に対処するには Embedresponsively.com. この無料のWebアプリ 埋め込みコードを自動生成 幅広いメディアサイトにも デフォルトのiframe要素をサポート.

デフォルトでは、 一握りのマルチメディアサイトから選ぶ ネイティブの埋め込みをサポートします。

• YouTube
• ビメオ
• デイリーモーション
• インスタグラム
• Twitter
• グーグルマップ
• サウンドクラウド
• 走り書き

これらの埋め込みコードをすべて暗記したり、埋め込みウィジェットと混同したりする必要はありません。ただ 埋め込むアイテムのURLをコピーします。 それをWebアプリに貼り付けます.

をクリックすると “埋め込む” ボタン プレビューを見る あなたができること サイズを変更してブラウザでテストする, ビデオがどのように適応するかを確認します。プレビューペインの下に、あなたができるコードのブロックがあります。 コピー/貼り付けしてあなたのサイトに埋め込むために使用する.

これは、レスポンシブ埋め込み問題に対する最も簡単な解決策の1つです。目標は アスペクト比を維持しながらビデオを柔軟に保つ-簡単な作業ではありません.

CSS-Tricksには、クラスとコンテナー要素にさらに依存する別の解決策があります。しかし、もしあなたが そのコンテナの追加を常に覚えておく必要はない あなたはEmbedresponsively.comを好むかもしれません.

現場をのぞいて、それに打撃を与えなさい。気にしないのなら 長いコードスニペットで作業する これはどんなレスポンシブレイアウトにも確かに素晴らしい解決策です。.

また、必要に応じて、GitHubから無料で完全なソースコードを見つけることができます。 より埋め込み可能なメディアのサポートを追加する.