iFrame overlay erring looking for an image?

This topic has 7 replies, 2 voices, and was last updated 5 years, 10 months ago by Rolf.

Viewing 7 reply threads

Author

Posts
- 11 August 2017 at 19:27 #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
- 11 August 2017 at 23:21 #8505
  Rolf
  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">
"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.
- 11 August 2017 at 23:27 #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!
- 11 August 2017 at 23:30 #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;}});});
```
- 11 August 2017 at 23:49 #8508
  
  Michael McHugh
  Participant
  
  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
- 11 August 2017 at 23:55 #8509
  
  Rolf
  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 🙂
- 11 August 2017 at 23:56 #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.
- 12 August 2017 at 00:04 #8511
  
  Rolf
  Keymaster
  
  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…
Author

Posts

Viewing 7 reply threads

You must be logged in to reply to this topic.