magnific does not work with youtube/vimeo

ghost commented 8 years ago

I have the following html to show youtube and vimeo video using magnific. The problem is that when I click on the link to popup the youtube/vimeo video, it give an error that the file is not found. With some investigation the firefox console shows that the browser is trying to locate a local file and not the youtube/vimeo url. In firefox, clicking the youtube link results in error message ... file:///embed/pBFQdxA-apI?autoplay=1&c=UTF-8&f=regular&d=Firefox can't find the file at /embed/pBFQdxA-apI?autoplay=1. In chromium, the error message ... GET file://www.youtube.com/embed/pBFQdxA-apI?autoplay=1 net::ERR_FILE_NOT_FOUND Somehow after the link is clicked, magnific is not properly handling the url and as a result it is interpreted as a local file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
</head>
<body>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=pBFQdxA-apI">Open YouTube video</a><br>
<a class="popup-vimeo" href="https://vimeo.com/67341671">Open Vimeo video</a><br>
<script>
$(function() {
    $('.popup-youtube, .popup-vimeo').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
</body>
</html>

ghost commented 8 years ago

Found the the solution. The page specified previously needed to be served from a server. I was opening the page from my local drive. Here are the references from stackoverflow that explains the issue.


http://stackoverflow.com/questions/21112025/how-to-embed-youtube-video-in-magnific-popup?s=1|1.6376
http://stackoverflow.com/questions/26867538/magnific-popup-youtube-video-doesnt-load
http://stackoverflow.com/questions/16917624/magnific-popup-error-when-opening-a-you-tube-video/17319478#17319478
http://stackoverflow.com/questions/26867538/magnific-popup-youtube-video-doesnt-load

chachapara commented 8 months ago

$(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 800, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, iframe:{ patterns:{ youtube:{ index: 'youtube.com', id: 'v=', src: 'https://www.youtube.com/embed/%id%' }, }, srcAction:'iframe_src', }, fixedContentPos: false }); }); in this src: 'https://www.youtube.com/embed/**%id%'** in /id you can replace v=pBFQdxA-apI in your html show href="https://www.youtube.com/watch?v=pBFQdxA-apI" it will be work but it use in static not in dynamic

dimsemenov / Magnific-Popup

magnific does not work with youtube/vimeo #895