[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を外部ファイルとして記述します。
<head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head>
Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。
<head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <!--==== ここからオプション =====--> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script> <script src="http://platform.twitter.com/widgets.js"></script> <!--==== ここまでオプション =====--> <script src="path/to/jquery.embed.js"></script> </head>
Step 2: HTML
埋め込む場所を用意します。
<div id="element"> <div> Some content here </div> <div> Some content here </div> ... ... </div>
Step 3: JavaScript
jQueryのセレクタで埋め込み先を指定し、スクリプトを実行します。
<script>
$('#element').embedJS({
gdevAuthKey : 'xxxxxxxx'
});
</script>
埋め込むメディアやサイズなどは、全てスクリプトで指定します。
<script>
$('#element').embedJS({
//The selector(id/class/tagName) inside #element that needs to be processed
embedSelector :'div',
//Instructs the library whether or not to embed urls
link : true,
//same as the target attribute in html anchor tag . supports all html supported target values.
linkTarget : '_blank',
//Array of extensions to be excluded from converting into links
linkExclude : ['jpg','pdf'],
//set false to show a preview of pdf links
pdfEmbed : true,
//set false to embed images
imageEmbed : true,
//set false to embed audio
audioEmbed : false,
//set false to show a preview of youtube/vimeo videos with details
videoEmbed : true,
//set false to show basic video files like mp4 etc. (supported by html5 player)
basicVideoEmbed : true,
//width of the video frame (in pixels)
videoWidth : 640,
//height of the video frame (in pixels)
videoHeight : 390,
//( Mandatory ) The authorization key obtained from google's developer console for
//using youtube data api and map embed api
gdevAuthKey : 'xxxxxxx',
//Set google map location embed
// Use @(place-name) to use this feature . Eg: @(Sydney)
locationEmbed :true,
//Instructs the library whether or not to highlight code syntax.
highlightCode : true,
//Instructs the library whether or not embed the tweets
tweetsEmbed : true,
tweetOptions:{
//The maximum width of a rendered Tweet in whole pixels. Must be between 220 and 550 inclusive.
maxWidth : 550,
//When set to true or 1 links in a Tweet are not expanded to photo, video, or link previews.
hideMedia : false,
//When set to true or 1 a collapsed version of the previous Tweet in a conversation thread
//will not be displayed when the requested Tweet is in reply to another Tweet.
hideThread : false,
//Specifies whether the embedded Tweet should be floated left, right, or center in
//the page relative to the parent element.Valid values are left, right, center, and none.
//Defaults to none, meaning no alignment styles are specified for the Tweet.
align : 'none',
//Request returned HTML and a rendered Tweet in the specified.
//Supported Languages listed here (https://dev.twitter.com/web/overview/languages)
lang : 'en'
},
//An array of services excluded from embedding...
//Options : codePen/jdFiddle/jsBin/ideone/plunker/soundcloud/twitchTv/dotSub/dailymotion/vine/ted/liveleak/spotify
//Can exclude all options by setting it to 'all'
excludeEmbed :['twitchTv'],
//Height of jsfiddle/codepen/jsbin/ideone/plunker
codeEmbedHeight :300,
soundCloudOptions: {
height : 160,
themeColor : 'f50000', //Hex Code of the player theme color
autoPlay : false,
hideRelated : false,
showComments: true,
showUser : true, //Show or hide the uploader name, useful e.g. in tiny players to save space)
showReposts : false,
visual : false, //Show/hide the big preview image
download : false //Show/Hide download buttons
},
vineOptions:{
width:500,
type:'postcard' //'postcard' or 'simple' embedding
},
//callback before pdf preview
beforePdfPreview : function(){},
//callback after pdf preview
afterPdfPreview : function(){},
// callback on video frame view
onVideoShow:function(){},
//callback on video load (youtube/vimeo)
onVideoLoad:function(){}
//function to execute before embedding services
beforeEmbedJSApply: function () {},
//callback after embedJS is applied
afterEmbedJSLApply: function () {},
//callback after the twitter widgets of a BLOCK are loaded.
onTwitterShow : function () {}
});
</script>
sponsors
