embedding grid outputs into javascript

Question

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!

Stephen Callender · Accepted Answer · 2013-10-21 17:42:34Z

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}

edited Oct 21, 2013 at 17:42

answered Oct 21, 2013 at 12:31

Stephen Callender

3,9022 gold badges20 silver badges44 bronze badges

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
– user579984

2013-10-21 17:22:18 +00:00
Commented Oct 21, 2013 at 17:22
See update. Thoughts?

Stephen Callender
– Stephen Callender

2013-10-21 17:43:09 +00:00
Commented Oct 21, 2013 at 17:43
Thanks Stephen but the script does not output at all

user579984
– user579984

2013-10-21 18:09:20 +00:00
Commented Oct 21, 2013 at 18:09
at all? nothing? the more code you can show along the way the better. Add to your original question.

Stephen Callender
– Stephen Callender

2013-10-21 18:29:09 +00:00
Commented Oct 21, 2013 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
– user579984

2013-10-21 19:51:29 +00:00
Commented Oct 21, 2013 at 19:51

Add a comment |

Stack Exchange Network

embedding grid outputs into javascript

1 Answer 1

Your Answer

Hot Network Questions

embedding grid outputs into javascript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions