動画 Video Fotorama デモ

YouTube や Vimeoなどの動画ページのリンクURLを設定し、動画を再生できます。なお、グーグルマップの表示も可能です。

YouTubeやVimeoの動画

もっとも簡単な方法:いわゆる埋め込みタグと同様な動画プレーヤが表示されます

・HTML

<div class="fotorama">
  <a href="https://www.youtube.com/watch?v=qtt7z9Y6-go">akb48 1</a>
  <a href="https://www.youtube.com/watch?v=RulkYt-TyjE">akb48 2</a>
  <a href="https://www.youtube.com/watch?v=dGDBHS1GUio">akb48 3</a>
  <a href="http://vimeo.com/61527416">vimeo 1</a>
  <a href="https://vimeo.com/153864294">vimeo 2</a>
</div>

・デモ(動画5枚 youtube/vimeo)
akb48 1 akb48 2 akb48 3 vimeo 1 vimeo 2

再生前の動画プレーヤに好きな画像を被せる方法(ドットナビゲーション)

・HTML

<div class="fotorama" data-width="560" data-ratio="560/347">
  <a href="https://www.youtube.com/watch?v=qtt7z9Y6-go">
    <img src="images/video/kimimelo-560x315.jpg"></a>
  <a href="https://www.youtube.com/watch?v=RulkYt-TyjE">
    <img src="images/video/minegishi2-560x315.jpg"></a>
</div>

・デモ(動画2枚 youtube/vimeo)

再生前の動画プレーヤに好きな画像を被せる方法(サムネールナビゲーション)

・HTML

<div class="fotorama" data-nav="thumbs" data-width="480" data-ratio="480/302">
  <a href="https://www.youtube.com/watch?v=gpReTa1JS0Q" data-img="images/video/sankei2-480x270.jpg">
    <img src="images/video/sankei2-480x270.jpg"></a>
  <a href="https://www.youtube.com/watch?v=31ak5rBJGck" data-img="images/video/sankei1-480x270.jpg">
    <img src="images/video/sankei1-480x270.jpg"></a>
</div>

・デモ(動画2枚 youtube/vimeo)

youtube/vimeo以外のその他の動画のカスタマイズ(Dailymotion/veoh/FC2など)

現在、確認できている動画サイトはDailymotion/veoh/FC2/Liveleak/Google Mapsです。

・HTML

<div class="fotorama">
  <a href="http://www.dailymotion.com/embed/video/x3psj53?autoplay=1"
     data-video="true" data-caption="dailymotion">
      <img src="images/f/w600/full-13.jpg">
  </a>
  <a href="http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1509&permalinkId=v923186666gBcrA6Z&player=videodetailsembedded&videoAutoPlay=0&id=anonymous"
     data-video="true" data-caption="veoh">
      <img src="images/f/w600/full-13.jpg">
  </a>
  <a href="http://video.fc2.com/flv2.swf?i=20100616CqSpAsCt&d=47&movie_stop=off&no_progressive=1&otag=1&sj=10&rel=1"
     data-video="true" data-caption="FC2">
      <img src="images/f/w600/full-13.jpg">
  </a>
 <a href="http://www.liveleak.com/ll_embed?f=24a93a532e54"
     data-video="true" data-caption="Liveleak">
      <img src="images/f/w600/full-13.jpg">
  </a>
 <a href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d65862.01211857248!2d139.63549907014828!3d35.465715438050964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sja!2sjp!4v1449878977369"
     data-video="true" data-caption="Google Maps">
      <img src="img/googlemaps.jpg">
  </a>
</div>

・デモ(動画4枚+グーグルマップ1枚 Dailymotion/veoh/FC2/Liveleak/Google Maps)

powered by Fotorama (c) Artem Polikarpov


  最終更新日:2016.3.8(初版)