on:2015年4月15日sponsorsYouTubeやVimeoやDairyMotionをはじめ、VineやTEDなどの動画、ツイート、CodePenやJSFiddleなどのコード、PDF、Googleマップなど、さまざまなメディアをWebページに簡単に埋め込むことができるjQueryのプラグインを紹介します。-GitHubEmbed.jsの特徴Embed.jsのデモEmbed.jsの使い方Embed.jsの特徴Embed.jsでは、さまざまなメディアをWebページに埋め込むことができます。:heart:(ハート)や:smile:(スマイル)などの絵文字を使ったテキストを埋め込めます。短縮URLに置き換えます。YouTubeやVimeoの動画をAPIから取得して埋め込みます。.ogv)を埋め込みます。PDFファイルをPDFビューワー付きで埋め込みます。コードをシンタックスハイライト対応で埋め込みます。Twitterのツイートを埋め込みます。JSFieldなどのコードとプレビューを埋め込みます。Spotifyの音楽ファイルを埋め込みます。TEDなども埋め込みます。Googleマップを埋め込みます。Embed.jsのデモデモではたくさんのメディアを埋め込んでいるので、その中からいくつか紹介します。デモ:emoticons:heart:(ハート)や:smile:(スマイル)などの絵文字を使ったテキスト、リンクを短縮URLに変更して埋め込みます。Vimeoなどの動画もサポート。デモ:VineVineなどの動画もサポートしています。デモ:PDFPDFファイルもサポート、PDFビューワー機能も備えているので中身を見ることもできます。デモ:コードハイライトコードの埋め込みはシンタックスハイライト対応。JSFieldなどのコードとプレビューもサポート。デモ:Twitterツイートの埋め込みも簡単。デモ:TEDTEDもサポート。デモ:GoogleマップGoogleマップもサポート。外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。src="path/to/jquery.embed.js"></script></head>Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。HTML埋め込む場所を用意します。JavaScriptjQueryのセレクタで埋め込み先を指定し、スクリプトを実行します。'xxxxxxxx'});</script>埋め込むメディアやサイズなどは、全てスクリプトで指定します。