[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
Post on:2015年4月15日
sponsorsr
YouTubeやVimeoやDairyMotionをはじめ、VineやTEDなどの動画、ツイート、CodePenやJSFiddleなどのコード、PDF、Googleマップなど、さまざまなメディアをWebページに簡単に埋め込むことができるjQueryのプラグインを紹介します。
Embed.jsの特徴
Embed.jsでは、さまざまなメディアをWebページに埋め込むことができます。
- :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。
- リンクを検出して、goo.gl, ow.ly, bit.ly などの短縮URLに置き換えます。
- YouTubeやVimeoの動画をAPIから取得して埋め込みます。
- HTML5プレイヤーにサポートされたメディアファイル（.mp3, .mp4, .ogg, .webm, .ogv）を埋め込みます。
- PDFファイルをPDFビューワー付きで埋め込みます。
- コードをシンタックスハイライト対応で埋め込みます。
- Twitterのツイートを埋め込みます。
- Codepen, JS Bin, JSFieldなどのコードとプレビューを埋め込みます。
- SoundCloud, Spotifyの音楽ファイルを埋め込みます。
- dailymotion, vine, TEDなども埋め込みます。
- Googleマップを埋め込みます。
Embed.jsのデモ
デモではたくさんのメディアを埋め込んでいるので、その中からいくつか紹介します。
:heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキスト、リンクを短縮URLに変更して埋め込みます。
YouTube, Vimeoなどの動画もサポート。
Vineなどの動画もサポートしています。
PDFファイルもサポート、PDFビューワー機能も備えているので中身を見ることもできます。
コードの埋め込みはシンタックスハイライト対応。
デモ：CodePen、デモ：JS Bin、デモ：JSField
Codepen, JS Bin, JSFieldなどのコードとプレビューもサポート。
ツイートの埋め込みも簡単。
TEDもサポート。
Googleマップもサポート。
Embed.jsの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。
[html]
...
[/html]
Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。
[html]
...
[/html]
Step 2: HTML
埋め込む場所を用意します。
[html]
...
...
[/html]
Step 3: JavaScript
jQueryのセレクタで埋め込み先を指定し、スクリプトを実行します。
[javascript]
[/javascript]
埋め込むメディアやサイズなどは、全てスクリプトで指定します。
[javascript]
[/javascript]
sponsors
