• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

How to open a lightbox video player from an AJAX response

[Solved]

Foliovision › Forums › FV Player › How to … › How to open a lightbox video player from an AJAX response

  • Harold 7 years, 8 months ago

    Hello,
    I have a custom page template in my WordPress website where I use AJAX call to create a table. Each row of this table contains a cell with a Select element, and one of it’s options suppose to play a video in a lightbox (each row has a different video file to play). I tried long and hard but it doesn’t work for me. Is it possible and if it is, HOW?
    Here is my code:
    In custom page:
    <form action=”<?php echo site_url() ?>/wp-admin/admin-ajax.php” method=”POST” id=”filter”>
    // list of links, each loads a table via AJAX to the “response” div
    link1, link2, …
    </form>
    <div id=”response” class=”posts-list”></div>

    in .js file:
    $(‘#filter’).submit(function(){
    var filter = $(‘#filter’);
    $.ajax({
    url:filter.attr(‘action’),
    data:filter.serialize(), // form data
    type:filter.attr(‘method’), // POST
    success:function(data){
    $(‘#response’).html(data); // insert data int “response” div
    }
    });
    return false;
    });

    in my functions.php file I have the function filter_function() that returns the requested table. Example output:
    “<table class=”no-borders”>
    <tr class=”header-back-color”>
    <th class=”title-column-width”>Title</th>
    <th class=”teacher-column-width”>Teacher</th>
    <th class=”date-column-width”>Date</th>
    <th class=”duration-column-width”>Duration</th>
    <th class=”options-column-width”></th>
    </tr><tr>
    <td>Some title</td>
    <td>My favorite teacher</td>
    <td>Sep 4 2017</td>
    <td>01:02:23</td>
    <td>
    <select class=”ddl-options” data-post-id=”501″>
    <option value=”” style=”display:none;” selected>Options</option>
    <option value=”” class=”watch-video”>Watch Video</option>
    <option value=””>Download Video</option>
    <option value=””>Download Audio</option>
    <option value=””>Download Summary</option>
    <option value=””>Download Source Sheet</option>
    </select>
    </td>
    </tr></table><br/>”

    When I click on “Watch Video” option, I want to see the player in a lightbox (overlay).
    I won’t bother you with all the things I already tried to do to achieve this. Please just tell me the working solution for this case.
    Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Harold 8 years ago

    I’m sorry, The table example wasn’t so good. Here is another one:
    “<table class=”no-borders”>
    <tr class=”header-back-color”>
    <th class=”title-column-width”>Title</th>
    <th class=”teacher-column-width”>Teacher</th>
    <th class=”date-column-width”>Date</th>
    <th class=”duration-column-width”>Duration</th>
    <th class=”options-column-width”></th>
    </tr><tr>
    <td>Some title</td>
    <td>Some teacher</td>
    <td>Sep 4 2017</td>
    <td>01:02:23</td>
    <td>
    <select class=”ddl-options” data-post-id=”882″>
    <option value=”” style=”display:none;” selected>Options</option>
    <option value=”https://www.MySite.com/wp-content/uploads/2017/06/movie.flv&#8221; class=”watch-video”>Watch Video</option>
    <option value=”https://www.MySite.com/wp-content/uploads/2017/06/movie.flv”>Download Video</option>
    <option value=”https://www.MySite.com/wp-content/uploads/2017/06/testAudio.mp3″>Download Audio</option>
    <option value=”https://www.MySite.com/wp-content/uploads/2017/06/summary.pdf”>Download Summary</option>
    <option value=”https://www.MySite.com/wp-content/uploads/2017/06/sourcesheet.pdf”>Download Source Sheet</option>
    </select>

    </td>
    </tr></table><br/>”

    Martin 8 years ago

    Hello Harold,

    I see what you are trying to do. You provide the video URL and expect FV Player JS to be able to build the lightbox from just that. That would be so nice, but unfortunately there is a fair bit of HTML involed and you would have to get it from somewhere. There is the “button” which brings up the lightbox and then the player code which shows up in the lightbox. And plus it all would have to keep beigh hooked in with all the events.

    My suggestion would be to preload all the players with [fvplayer] shortcodes on that page and then just click them with JS as user picks these options in dropdowns – you would have to connect these two together with some IDs.

    You could use the lightbox text links and just put these into hidden div: https://foliovision.com/player/basic-setup/using-lightbox#anchor-text-with-lightbox

    Also, you should be getting rid of FLV and use a HTML5 compatible video format: https://foliovision.com/player/basic-setup/encoding

    Thanks,
    Martin

    Harold 8 years ago

    Thank you for your reply.
    Your suggestion was one of the things I tried, unsuccessfully. I added shortcodes in the HTML code returned by AJAX, but when I click on a link that suppose to open a lightbox, it only jumps to the head of the page and no lightbox is opened. For the comparison, I added a shortcode in the HTML of the page itself (loaded on page load, not by AJAX), and it works perfectly.
    In both cases I used the same shortcode:
    [fvplayer src="video.mp4" lightbox="true;text" caption="Watch Video" splash="tree.jpg"]
    I looked at the markup and saw a difference between the tags:
    tag created from shortcode on page load:

    test

    tag created by shortcode in HTML code returned by AJAX:
    Watch Video

    As you can see, the class attribute is missing in second tag. I assume that this is what prevents the lightbox opening. The question is, What can I do in this case?

    Martin 8 years ago

    Hello Harold,

    my suggestion would be to have the shortcode in the HTML of the page itself and just make it hidden and click it based on the dropdown selection.

    Thanks,
    Martin

    Harold 8 years ago

    I tried that too. I added one shortcode in the page itself that looks like this:
    <div id=”player-container” style=”display: none;”>
    <?php
    echo do_shortcode(‘[fvplayer src="movie.mp4" lightbox="true;text" caption="Watch Video"]‘);
    ?>
    </div>
    and wanted to reset its video file source to the selected video every time a user selects a different video. Then I have these problems:
    1. When I try to access the player in my script (on select change event), I write:
    $(“#player-container a”).flowplayer();
    and get errors like (randomly):
    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data fv-flowplayer.min.js:402:16

    or:
    Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at fv_player_videos_parse (fv-flowplayer.min.js?ver=6.2.9:402)
    at fv-flowplayer.min.js?ver=6.2.9:475
    at fv-flowplayer.min.js?ver=6.2.9:7
    at Array.forEach (<anonymous>)
    at fv-flowplayer.min.js?ver=6.2.9:7
    at HTMLDivElement.l (fv-flowplayer.min.js?ver=6.2.9:6)
    at Object.e.trigger (fv-flowplayer.min.js?ver=6.2.9:6)
    at r (fv-flowplayer.min.js?ver=6.2.9:7)
    at HTMLAnchorElement.<anonymous> (fv-flowplayer.min.js?ver=6.2.9:7)

    or even:
    flowplayer() is not a function.

    then I try this:
    var player = $f(“player-container”);
    and get this error:
    ReferenceError: $f is not defined

    Now, assuming you can help me with the problems above, I would like to know how exactly to reset the video url of the player. If you can give me a code example, I will appreciate it very much.
    Thank you!

    Martin 8 years ago

    Hello Harold,

    I wouldn’t recommend to try to swap out the video file source. Also $(“#player-container a”).flowplayer(); would only work if #player-container contains a video tag, but I’m not sure, it’s not how FV Player works anymore. I’m not sure what $f is, it must be something which you define.

    If you want to take an existing FV Player instance and swap out the file URL in it, you can use:

    flowplayer('.flowplayer').load('https://cdn.foliovision.com/videos/dominika-960-31.mp4');

    It’s better to make that .flowplayer selector as specific as possible.

    Thanks,
    Martin

    Harold 8 years ago

    Hi Martin
    1. the $f syntax is taken from this documentation: http://flash.flowplayer.org/documentation/api/index.html.
    Now I see it may be something that is not related to the flowplayer we are talking about. What is this, then?

    2. Creating one shortcode on the page and changing it’s source file didn’t work.

    3. What did work is what you initially said, to add a hidden shortcode for each video to the page and click it programmatically using JS when the user selects a video.
    Now I have one issue:
    Let’s say I have 15 hidden shortcodes on the page.
    When the player is displayed, it shows “2 of 15” (for example) on the bottom left corner and it has the ‘next’ and ‘prev’ buttons. Is there a way to get rid of this all?
    Thank you!

    Martin 8 years ago

    Hello Harold,

    That documentation is for Flowplayer 3. FV Player is using Flowplayer 6 and we are working on upgrading to Flowplayer 7. Fortunately the APIs there are almost identical.

    You can get rid of the prev/next arrows using CSS. The selectors are #fv_player_pro_boxCurrent, #fv_player_pro_boxPrevious, #fv_player_pro_boxNext.

    Thanks,
    Martin

    Harold 8 years ago

    Thank you Martin! Now everything works perfectly!

    Eduard 8 years ago
    Avatar photo

    Hi Harold,

    Don’t forget to check our changelog for any future changes in our software.

    Thanks,
    Eduard

Viewing 10 replies - 1 through 10 (of 10 total)
Reply To: How to open a lightbox video player from an AJAX response



Please Sign in or Register to upload files.

Related Posts

  1. Using the Video Lightbox Effect

  2. FV Player 7 Beta – New video lightbox

  3. Custom Video Ads in FV Player (pre-roll and post-roll)

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!