Popup with video or map (elements-lightboxes.html)

[pgreasby]

Hello
I’m having trouble getting the popup video working. I copied the following code (below) from the lightboxes example page into one of your other templates (without any changes) and none of the media popups work.

Each time an ‘unhappy’ face appears and a message, for example “youtube refused to connect”

As these same clips are working on the Elements page, what am I missing?

Thank you

Paul

<div class="row">
										<div class="col-lg-4">
											<a href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a>
										</div>
										<div class="col-lg-4">
											<a href="https://vimeo.com/634043438">Open Vimeo Video</a>
										</div>
										<div class="col-lg-4">
											<a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
										</div>
									</div>

---

[pgreasby]

Follow up to the above. I added “embed” in the YouTube address and although now the video appears, it does not appear in a popup window. Just full screen over the website. This means to get back to the site, user would have to click back button, which is NOT what I want.

I simply want the video to be playing in a popup or overlay window with an X to close it. The way it is working right now is no different to linking directly to YouTube (except it full-screens the video to the available space).

Anything I’m doing wrong? Ive tried with the Porto example youtube clip instead of my own, using the /embed/ method and the same problem occurs. It simply won’t appear in a popup. However the example on the Lightbox page does work without the /embed/ and using my own youtube link without embed works in the example Lightbox page. So I assume the problem must lie with the template I’m using (which is the index-classic-video.html

Thanks for any help

---

[Support]

Hi, please try with the following code:

<a href="https://www.youtube.com/watch?v=Ibz-hF51rZ0" class="youtube-lightbox">Open Lightbox</a>

(js/custom.js)

$(document).ready(function() {
    $('.youtube-lightbox').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});

Important: To make it work you just need to upload the files to your server (FTP), or just run that in a localserver (localhost). It won’t work open the HTML file directly in the browser.

Let me know if you need further assistance.

Best Regards,

Okler Themes

---

[Author]

Posts