[JS]これは便利!YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js

YouTubeやVimeoやDairyMotionをはじめ、VineやTEDなどの動画、ツイート、CodePenやJSFiddleなどのコード、PDF、Googleマップなど、さまざまなメディアをWebページに簡単に埋め込むことができるjQueryのプラグインを紹介します。

サイトのキャプチャ

Embed.js
Embed.js -GitHub

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のデモ

デモではたくさんのメディアを埋め込んでいるので、その中からいくつか紹介します。

デモのキャプチャ

デモ:emoticons

:heart:(ハート)や:smile:(スマイル)などの絵文字を使ったテキスト、リンクを短縮URLに変更して埋め込みます。

デモのキャプチャ

デモ:YouTubeデモ:Vimeo

YouTube, Vimeoなどの動画もサポート。

デモのキャプチャ

デモ:Vine

Vineなどの動画もサポートしています。

デモのキャプチャ

デモ:PDF

PDFファイルもサポート、PDFビューワー機能も備えているので中身を見ることもできます。

デモのキャプチャ

デモ:コードハイライト

コードの埋め込みはシンタックスハイライト対応。

デモのキャプチャ

デモ:CodePenデモ:JS Binデモ:JSField

Codepen, JS Bin, JSFieldなどのコードとプレビューもサポート。

デモのキャプチャ

デモ:Twitter

ツイートの埋め込みも簡単。

デモのキャプチャ

デモ:TED

TEDもサポート。

デモのキャプチャ

デモ:Googleマップ

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>

top of page

©2017 coliss