1

I have a number of entries containing videos with the language options contained in an ee2.7 grid field (ie. English / Irish). I am using the following code to output each video link in a fancybox lightbox. However the code I have at present does not work for ie8 and ipads etc.

{parents field="related_story"}
          <div class="{switch='three columns alpha|three columns omega'}">
           <ul>
                    <li><strong>{parents:title}</strong><br> 
{parents:video}<a class="fancybox-media" href="{parents:video:video_url}" 
title="{parents:title}" >{parents:video:video_title}</a>&nbsp;&nbsp;{/parents:video}</li> 
                     </ul> 
                     <div class="clear"> </div> 
                      </div>  
                     {/parents}  

Ideally I need to have a separate piece of js for each video similar to the following which I am using elsewhere on the site to pull in specific videos:

$(window).load(function(){
$("a.fancybox-myths").fancybox({
  content:'<div id="videospace">Loading the Video...</div>',
  maxWidth:"100%",
  maxHeight:"100%",
  fitToView:false,
  maxwidth:"100%",
  autoSize:false,
  closeBtn:true,
  openEffect:"fade",
  closeEffect:"fade",
  scrolling:"no",
  autoDimensions:!0,
  helpers:{closeClick:!0,
    title:{type:"inside"},
    overlay:{
      locked:!1,
      css:{
        background:"rgba(40, 33, 33, 0.80)"
      }
    }
  },
  afterShow:function(){
    jwplayer("videospace").setup({
      playlist: [{file: "http://webaddress.com/assets/video/title.mp4"}],
      primary:"flash",
      autostart:true,
      rtmp:{bufferlength:5},
      width: "100%",
      aspectratio: "16:9"})
  }
})
});  

Essentially, what I need to do is automatically output the following line of the script dynamically with each link:

[{file: "http://webaddress.com/assets/video/title.mp4"}],         

Apologies, this probably sounds very complicated!

1

However the code I have at present does not work for ie8 and ipads etc.

Are you sure that this is not a JWPlayer compatibility issue? If it works everywhere else, then it's most likely not an EE-specific issue.

UPDATE

What if you just remove the playlist setting and put every other setting in a global script? Then you can assign the video url inside the EE tags like below. Is that what you're trying to do?

 {parents field="related_story"}
   <div class="{switch='three columns alpha|three columns omega'}">
     <ul>
       <li>
         <strong>{parents:title}</strong><br>
         {parents:video}
         <a class="fancybox-media" href="{parents:video:video_url}" title="{parents:title}">{parents:video:video_title}</a>&nbsp;&nbsp;
         <script>
         $(window).load(function(){
           $("a.fancybox-myths").fancybox({
             afterShow:function(){
               jwplayer("videospace").setup({
                 playlist: [{file: "{parents:video:video_url}"}]
               })
             }
           })
         });
         </script>
         {/parents:video}
       </li> 
     </ul> 
     <div class="clear"> </div>
   </div>
 {/parents}  
5
  • Hi Stephen other videos that are hard coded into the site work ok in ipad and ie etc - I just need to incorporate the above code in a way that will pull out the EE field output.
    – user579984
    Oct 21 '13 at 17:22
  • See update. Thoughts? Oct 21 '13 at 17:43
  • Thanks Stephen but the script does not output at all
    – user579984
    Oct 21 '13 at 18:09
  • at all? nothing? the more code you can show along the way the better. Add to your original question. Oct 21 '13 at 18:29
  • Hi Stephen, I have retested the videos and it appears that while they look like mp4s they have not been output correctly. I will have to go back to the client and get them to re-output the videos before I go any further - thanks for your help!
    – user579984
    Oct 21 '13 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.