動画 Video fotorama デモ

動画 Video Fotorama デモ

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

YouTubeやVimeoの動画

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

class="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクします。
Aタグ<a href="....">～</a>の～の部分のテキストは単なるメモになります。

・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>

・デモ（動画５枚 youtube/vimeo）

akb48 1 akb48 2 akb48 3 vimeo 1 vimeo 2

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

class="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクします。
Aタグ<a href="xxx.jpg">～</a>に、IMGタグで動画プレーヤに被せる画像を記述します。
fotoramaステージの大きさの設定について
現在、動画サイスはアスペクト比（レシオ）が、16:9が主流です。
例えば、サイズが560X315 pxの動画を設定したい場合、fotoramaステージの大きさは、高さに32（ナビゲーション部分）を加えた数値を指定します。
これにより、動画は560X315 pxの大きさで再生されます。
（例）data-width="560"、data-ratio="560/347" (347=315+32 高さ)
(参考）動画サイズの計算方法（w：横幅、h：高さ）
・レシオ 16:9の場合：h=w×9÷16　・レシオ 4:3の場合：h=w×3÷4 （いずれも、小数点以下は四捨五入）

・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>

・デモ（動画２枚 youtube/vimeo）

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

class="fotorama"のDIVタグ<div class="fotorama">にサムネールオプションdata-nav="thumbs"を追加します。
class="fotorama"のDIVタグ<div class="fotorama" data-nav="thumbs"> </div>に、Aタグで動画ページのリンクし、
オプションdata-imgでサムネール画像を記述します。
Aタグ<a href="....">～</a>に、IMGタグで動画プレーヤに被せる画像を記述します。

・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>

・デモ（動画２枚 youtube/vimeo 欅坂46）

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

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

class="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクし、
オプションdata-video="true"を記述します。オプションdata-videoはyoutube/vimeo以外の場合に設定します。
リンクするURLの見つけ方はこちら。
Aタグ<a href="....">～</a>に、IMGタグで動画プレーヤに被せる画像を記述します。
youtube/vimeo以外の場合、オプションdata-video="true"と併せて設定します。

・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="Ｌiveleak">
      <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>

・デモ（動画４枚＋グーグルマップ1枚　Dailymotion/veoh/FC2/Ｌiveleak/Google Maps）

最終更新日：2016.3.8(初版）