Jquery video wall mix with Fancybox javascript -

Jquery video wall mix with Fancybox javascript -

i got code net videowall, managed alter , set everything.

the code basicly thumbnails play video form archive .mp4 or .ogv mouse over, , when click open fancybox video.

the issue having when open vimeo in fancybox depending on browser using open flash. problem when seek open on ios not load, cause opening flash..

here code calls fancybox

<div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/109228610' data-type='local' data-mp4='../media/video/1/wall/011.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video" data-description="" data-thumb="../media/video/1/wall/01.jpg"></div>

i know must simple, don´t know if info provided enought. need find way of making video open, not flash, ios devices can see it.

thank in advance help.

here code

class="snippet-code-js lang-js prettyprint-override">hello jfk, here code utilize : <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html5 video wall</title> <link rel="stylesheet" type="text/css" href="css/vw_default.css" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- fancybox --> <link rel="stylesheet" type="text/css" href="data/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" /> <link rel="stylesheet" type="text/css" href="data/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /> <link rel="stylesheet" type="text/css" href="data/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" /> <script type="text/javascript" src="data/fancybox/source/jquery.fancybox.js?v=2.1.5"></script> <script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> <script type="text/javascript" src="data/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <!-- end fancybox --> <script type="text/javascript" src="js/jquery.videowall.min.js"></script> <script type="text/javascript"> var hap_player; jquery(document).ready(function($) { /* settings */ var vw_settings = { /*activeplaylist: active playlist start with. come in element 'id' attribute, or leave empty none. */ activeplaylist:'playlist1', /*playlistlist: dom element holds list of playlists */ playlistlist:'#playlist_list', /*uselivepreview: true/false (play video on thumbnail rollover). defaults false on mobile. */ uselivepreview:true, /*usesound: true/false (use sound in preview videos, if uselivepreview = true) */ usesound:true, /* usewebmvideoformat: true/false (browser back upwards html5 video requires minimum of 2 video formats cover browsers, mp4 , ogv beingness preffered. if usewebmvideoformat true, webm used instead of ogv.) */ usewebmvideoformat:false, /*walltype: default/icons/zoom/tooltip/'' (''=dont create playlist) */ walltype:'default', /*useremovebuttons: true/false (create button remove vimeo playlist; walltype icons) */ useremovebuttons:true, tooltips: {remove: 'remove',/* remove button */ expand: 'expand',/* lightbox button */ link: 'external link',/* external link button */ action: 'custom action'},/* empty action button */ /* media_id: unique id api (if multiple player instances used, strings need different!) */ media_id:'default' }; hap_player = $('#componentwrapper').videowall(vw_settings); //initapi(); }); var api_panel, api_panel_inited, api_panel_inner, toggle_api_panel, api_panel_opened, tgtime = 300; function initapi(){ api_panel = $('#api_panel').css('display', 'block'); api_panel_inner = $('#api_panel_inner'); api_panel.css('right', -api_panel_inner.outerwidth(true)-20+'px'); toggle_api_panel = $('.toggle_panel').css({cursor:'pointer', display:'block'}).bind('click', function(){ if(api_panel_opened){ api_panel.stop().animate({ 'right': -api_panel_inner.outerwidth(true)-20+'px'}, {duration: tgtime, complete: function(){ api_panel.css('display','none'); }}); $(this).removeclass().addclass('toggle_panel'); api_panel_opened=false; }else{ api_panel.css('display','block').stop().animate({ 'right': 41+'px'}, {duration: tgtime}); $(this).removeclass().addclass('toggle_panel_close'); api_panel_opened=true; } return false; }).click(); api_panel_inited=true; } </script> <div id="componentwrapper"> <div class="componentplaylist"><div class="playlist_content"></div></div> <div class="preloader"></div> </div> <div id="playlist_list"> <!-- local tracks --> <div id='playlist1'> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/011.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="descriptiions" data-description="" data-thumb="../media/video/1/wall/01.jpg"></div> <!-- 2 think2--> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808" width="500" height="281" frameborder="0" ' data-type='local' data-mp4='../media/video/1/wall/012.mp4' data-ogv='../media/video/1/wall/02.ogv' data-title="youtube video" data-description="descriptiions." data-thumb="../media/video/1/wall/02.jpg"></div> <!-- 3 jet --> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/013.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/03.jpg"></div> <!--4 welcome --> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/video/28383808' data-type='local' data-mp4='../media/video/1/wall/014.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/04.jpg"></div> <!--5 linha--> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/015.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/05.jpg"></div> <!--6 corat --> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/016.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/06.jpg"></div> <!--7 pier 111--> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/video/28383808' data-type='local' data-mp4='../media/video/1/wall/017.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/07.jpg"></div> <!--8 tarsila --> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/018.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/08.jpg"></div> <!-- 9 abc dos caes--> <div class='playlistitem' data-hook='fancybox-gallery1' data-link='//player.vimeo.com/video/28383808' data-type='local' data-mp4='../media/video/1/wall/019.mp4' data-ogv='../media/video/1/wall/01.ogv' data-title="vimeo video nulla facilisi" data-description="descriptiions." data-thumb="../media/video/1/wall/09.jpg"></div> </div>

javascript jquery fancybox mix