YouTube や Vimeo の組み込みビデオを、ボタンなどを押した時にモーダルで再生するための組み込みJSです。

デモ

ビデオを再生

使い方

js/config.js に設定されている「modalVideoMark」に設定されているクラス（デフォルト: js-modal-video）をクリックして再生したい要素に振ります。 次に「data-video-id」データ属性にビデオのidを指定します。

<button class="js-modal-video" data-video-id="MwlwcmF0hwo">ビデオを再生</button>

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

modalVideoMark: '.js-modal-video', // ここで指定したセレクターをクリックするとビデオが再生されます
modalVideoConfig: {
  channel: 'youtube', // どのサービスを使うか指定します
  youtube: { // youtubeの設定です。オプションはyoutubeのapiドキュメントを参照してください。
    autoplay: 1,
    cc_load_policy: 1,
    color: null,
    controls: 1,
    disablekb: 0,
    enablejsapi: 0,
    end: null,
    fs: 1,
    h1: null,
    iv_load_policy: 1,
    list: null,
    listType: null,
    loop: 0,
    modestbranding: null,
    origin: null,
    playlist: null,
    playsinline: null,
    rel: 0,
    showinfo: 1,
    start: 0,
    wmode: 'transparent',
    theme: 'dark'
  },
  ratio: '16:9', // ビデオの比率を指定
  vimeo: { // vimeoの設定です。オプションはvimeoのapiドキュメントを参照してください。
    api: false,
    autopause: true,
    autoplay: true,
    byline: true,
    callback: null,
    color: null,
    height: null,
    loop: false,
    maxheight: null,
    maxwidth: null,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false
  },
  allowFullScreen: true, // フルスクリーンの許可設定
  animationSpeed: 300, // モーダルのトグルアニメーションスピード（ms）
    classNames: { // モーダルコンポーネントのクラス名
      modalVideo: 'modal-video',
      modalVideoClose: 'modal-video-close',
      modalVideoBody: 'modal-video-body',
      modalVideoInner: 'modal-video-inner',
      modalVideoIframeWrap: 'modal-video-movie-wrap',
      modalVideoCloseBtn: 'modal-video-close-btn'
  },
  aria: { // スクリーンリーダーメッセージ
    openMessage: 'ビデオを開きました。',
    dismissBtnMessage: 'ここをクリックするとビデオを閉じます。'
  }
}

View Transitions API の利用することで、一覧ページの Entry_Summary から詳細ページの Entry_Body にページを遷移する際に、画像が拡大するようなアニメーションをつけることができます。実際の動きは、以下の YouTube の動画をご覧ください。

OpenStreetMapがVer.2.9から利用可能になりました。

js-open-street-map という class 属性を適用すれば、簡単に好きなページで利用できます。

さらに、data 属性を指定することで経度、緯度、zoom値などを指定できます。

<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" data-lazy="true" style="width: 100%; height: 300px;"></div>

また、data-multipleという属性にtrueを設定し、data-markers属性に対してピンを立てたい位置情報を|区切りで記述します。そうすることで下のように複数ピンを表示することが可能になります。

<div class="js-open-street-map"
  data-lazy="true"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  style="width: 100%; height: 400px;"
></div>

さらに、data-messagesという属性を使えばpin一つ一つにコメントをつけることも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

<div class="js-open-street-map"
  data-lazy="true"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  style="width: 100%; height: 400px;"
></div>

OpenStreetMap の地図が画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<div 
  class="js-open-street-map"
  data-lat="35.18531791793727"
  data-lng="136.89938921481374"
  data-zoom="14"
  data-lazy="true"
  style="width: 100%; height: 300px;"
></div>