iFrame overlay erring looking for an image?

Home Forums Easy FancyBox Pro iFrame overlay erring looking for an image?

This topic contains 7 replies, has 2 voices, and was last updated by  RavanH 4 months ago.

  • Author
    Posts
  • #8503

    Michael McHugh
    Participant

    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

  • #8505

    RavanH
    Keymaster

    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">
    [video src="https://www.dfstudio.com/wordpress/wp-content/uploads/2017/07/video-
    playback.m4v"]
    </div>
    </div>
    

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

  • #8506

    Michael McHugh
    Participant

    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!

  • #8507

    Michael McHugh
    Participant

    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;}});});
    
  • #8508

    Michael McHugh
    Participant

    Btw, the [video] 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

  • #8509

    RavanH
    Keymaster

    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 🙂

  • #8510

    Michael McHugh
    Participant

    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.

  • #8511

    RavanH
    Keymaster

    the [video] 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.

Site by Pharéo | Hosted on The Permanently Moving Network