iFrame overlay erring looking for an image?

Your Account / Forums / Easy FancyBox Pro / iFrame overlay erring looking for an image?

  • Author
    Posts
    • August 11, 2017 at 7:27 pm #8503

      Hi,

      At the link below the image under “Enhanced Video File Support and Playback”, there’s a “( Click HERE to view demo )” link with class=”fancybox-iframe” that loads a page with a locally hosted video. Whenever it’s clicked, it loads the video page in the iframe, but another overlay appears on top of it with the error: “The image could not be loaded”

      https://www.dfstudio.com/?p=8715&preview=1&_ppp=afe0490fc2

      Any idea why this is happening?

      Also, it’d be nice if Easy FancyBox Pro could just deliver locally hosted videos on their own like YouTube, Vimeo, etc. Having to create a page and then load that as an iFrame is a less than elegant work-around. Is there a better way?

      I’ve tried using a video shortcode in a hidden div as inline content, but that doesn’t work either.

      Thanks,
      Michael

    • August 11, 2017 at 7:27 pm #8505

      Hi Michael,

      Viewing the message “The image could not be loaded” in the browser developer tools, it seem to be coming from the Magnific Popup plugin.

      Not sure why that script would fire upon clicking that link but you could you test by disabling that popup plugin to see if the message disappears. Next step would be to figure out why that popup script would be called at all here…

      About playing video inside the light box: in itself the light box script is not a media player, but it woud be indeed a nice feature to have an integrated video player. I’ll consider it for a next release.

      In the mean time, you could consider two different approaches:

      1. Link directly to the media file and let each visitor browser figure out what to do with the m4v format. It would look like this in the Text tab when editing the page:

      
      <a class="fancybox-iframe" href="https://www.dfstudio.com/wordpress/wp-content/uploads/2017/07/video-playback.m4v">( Click HERE to view demo )</a>
      

      2. Alternatively, instead of embedding a video on a separate page, you could embed the video in the page itself. Then hide it from view and call in fancybox as inline content.

      When editing the page in the Text tab it might look like something this:

      
      <a class="fancybox-inline" href="#video-playback">( Click HERE to view demo )</a>
      
      <div class="fancybox-hidden">
      <div id="video-playback" style="width:960px;height:505px">
      "https://www.dfstudio.com/wordpress/wp-content/uploads/2017/07/video-
      </div>
      </div>
      

      Note that the class of the link changed to “fancybox-inline” in this second example.

    • August 11, 2017 at 7:27 pm #8506

      Thanks for the quick response.

      Odd. Didn’t realize Magnific Popup was even in that theme. I have a script to disable it which I’ll try — use it on their Divi theme for the same situation. I’d just never seen that error before.

      I’d tried that inline method with the video shortcode, but perhaps Magnific Popup was interfering with it to. I’ll try it again. That’d certainly be easier than the separate page method.

      As far as an integrated Video player, WordPress already has MediaElement.js incorporated — perhaps just make use of that when passing a video URL and a class=”fancybox-video” on the link?

      Thanks!

    • August 11, 2017 at 7:27 pm #8507

      Fyi. This is the script to disable Magnific Popup, which worked in this situation to solver the multiple pop-up issue.

      
      jQuery(document).ready(function ($) {var magnificPopupEnabled = false;$.extend(true, $.magnificPopup.defaults, {disableOn: function() {return false;}});});
      
    • August 11, 2017 at 7:27 pm #8508

      Btw, the shortcode inline kind of works, but the video oddly does not expand to fit the enclosing div properly, so I’ve stuck with the iframed page for now.

      Also, when using autoplay in the shortcode, the video starts on page load, not when the overlay opens.

      Perhaps these issues can be addressed in your implementation.

      Thanks,
      Michael

    • August 11, 2017 at 7:27 pm #8509

      As far as an integrated Video player, WordPress already has MediaElement.js incorporated — perhaps just make use of that when passing a video URL and a class=”fancybox-video” on the link?

      That’s exactly what is happening when using the Inline Content method in the second example 🙂

    • August 11, 2017 at 7:27 pm #8510

      Yes, but as noted in my last post. It has some issues. It would be a viable way of doing it if it fit the overlay window correctly. Not sure why it’s not.

    • August 11, 2017 at 7:27 pm #8511

      the shortcode inline kind of works, but the video oddly does not expand to fit the enclosing div properly

      You could play with the style attribute size parameters (style=”width:960px;height:505px” in the example code) to adapt the resulting light box size to the video.

      Also, when using autoplay in the shortcode, the video starts on page load, not when the overlay opens.

      That’s indeed an issue that cannot be worked around in the inline content method…

  • You must be logged in to reply to this topic.