Я ранее настроил Fancybox в своем магазине Bigcommerce, чтобы мои видео появлялись в лайтбоксе fancybox. Он работал отлично, и с тех пор я не вносил никаких изменений в страницы, но теперь они больше не работают. Вместо этого видео ведут меня прямо на YouTube, где оно находится. Я включаю свой код, который я сейчас использую. Я не уверен почему, но bigcommerce немного меняет мой код по ссылкам. Раньше проблем не возникало, но, возможно, именно здесь проблема.
Это сценарий, который я сохранил как fancybox в разделе сценариев bigcommerce:
<script>jQuery(document).ready(function($){
$(".fancybox").on("click", function(){
$.fancybox({
href: this.href,
type: $(this).data("type")
}); // fancybox
return false
}); // on
}); // ready
</script>
Затем я добавил fancybox через контент WebDav и связал необходимые файлы в файле base.html.
Это одна из веб-страниц, на которой у меня есть фантазия:
<div id="floating-boxprinthelp">
<div id="floating-boxprint">
<h3 style="text-align: center;"><strong>Full Bleed</strong></h3>
<p style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-collage-full-bleed.png" alt="Precious Memories Full Bleed Print Option" width="550" height="276" /></p>
<p style="text-align: center;">Full Bleed design covers the micro-perfed pages from edge to edge.</p>
</div>
<div class="floating-boxprint">
<h3 style="text-align: center;"><strong>White Border</strong></h3>
<p style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-collage-white-border.png" alt="Precious Memories Designer White Border Print Option" width="550" height="276" /></p>
<p style="text-align: center;">An alternative to the original Precious Memories Designer. Final prints feature a clean white border on all edges. <em>There are no extra perfed strips to tear off.</em></p>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Bookmarks</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-bkmk.png" alt="Precious Memories Full Bleed Bookmarks" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/ez93LB4Bv5s" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Bookmark Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Bookmarks.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Bookmarks</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-bkmk.png" alt="Precious Memories White Border Bookmarks" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/BeGhaHoVVcc" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Bookmark Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Bookmarks.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Church Bulletins</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-cb.png" alt="Precious Memories Designer Full Bleed Church Bulletins Print Help" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/50F2hmScR_I" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Church Bulletin Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Church-Bulletins.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Church Bulletins</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-cb.png" alt="Precious Memories Designer White Border Church Bulletins Print Help" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/9oFz4AoInn0" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Church Bulletin Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Church-Bulletins.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div id="floating-boxprint3">
<h4 style="text-align: center;">Directory Signs</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-dsigns.png" alt="PMD Directory Signs" width="240" height="240" /></p>
</div>
<div id="floating-boxprint2">
<h4 style="text-align: center;">Full Sheet</h4>
<div style="text-align: center;"><a href="https://youtu.be/lgwT8Bh8K4o" data-fancybox="">Video</a> <a title="Precious Memories Designer Directory Sign Full Sheet Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Directory-Sign-Full-Sheet.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint2">
<h4 style="text-align: center;">Half Sheet</h4>
<div style="text-align: center;"><a href="https://youtu.be/i_R9Dy3jO2M" data-fancybox="">Video</a> <a title="Precious Memories Designer Directory Sign Half Sheet Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Directory-Sign-Half-Sheet.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint2">
<h4 style="text-align: center;">Lectern</h4>
<div style="text-align: center;"><a href="https://youtu.be/pL5UKtsOcgM" data-fancybox="">Video</a> <a title="Precious Memories Designer Directory Sign Lectern Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Directory-Sign-Lectern.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div id="floating-boxprint3">
<h4 style="text-align: center;">Grave Markers</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-gm.png" alt="PMD Grave Markers" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/xirSYv6SgCI" data-fancybox="">Video</a> <a title="Precious Memories Designer Grave Marker Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Grave-Markers.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint3">
<h4 style="text-align: center;">Memorial Candles</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-candles-lady.png" alt="PMD Memorial Candles" width="240" height="240" /></p>
</div>
<div id="floating-boxprint2">
<h4 style="text-align: center;">Square Candles</h4>
<div style="text-align: center;"><a href="https://youtu.be/Mm4S-Vc5LVU" data-fancybox="">Video</a> <a title="Precious Memories Designer Square Candles Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Square-Candles.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint2">
<h4 style="text-align: center;">Small Candles</h4>
<div style="text-align: center;"><a href="https://youtu.be/Qz807ghiz30" data-fancybox="">Video</a> <a title="Precious Memories Designer Small Candles Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Small-Candles.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint2">
<h4 style="text-align: center;">Large Candles</h4>
<div style="text-align: center;"><a href="https://youtu.be/lIFi0v6dckk" data-fancybox="">Video</a> <a title="Precious Memories Designer Large Candles Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Large-Candles.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div id="floating-boxprint3">
<h4 style="text-align: center;">Picture Frames</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-picture-frame.png" alt="PMD Picture Frames" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/kKxCYO2CNOE" data-fancybox="">Video</a> <a title="Precious Memories Designer Picture Frames Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Picture-Frames.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div id="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Prayer Cards</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-pc.png" alt="PMD Prayer Cards Full Bleed" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/aB7gmtg5nF8" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Prayer Card Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Prayer-Cards.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Prayer Cards</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-pc.png" alt="PMD White Border Prayer Cards" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/3T_6Cqj-WOs" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Bookmark Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Prayer-Cards.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Register Books</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-rb.png" alt="PMD Full Bleed Register Books" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/PWIBXl641Ng" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Register Book Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Register-Books.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Register Books</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-rb.png" alt="PMD White Border Register Book" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/A0iz8Gvvb2w" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Register Book Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Register-Books.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Service Records</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-sr.png" alt="PMD Service Records Full Bleed" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/woCLwY7QfdU" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Service Records Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Service-Records.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Service Records</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-sr.png" alt="PMD White Border Service Records" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/4zsCVTqbd14" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Service Records Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Service-Records.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Thank You Cards</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-tyc.png" alt="PMD Full Bleed Thank You Cards" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/iIwg0CfjFbk" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Thank You Cards Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Thank-You-Cards.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Thank You Cards</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-tyc.png" alt="PMD White Border Thank You Cards" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/qgEPWTTrZd8" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Thank You Cards Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Thank-You-Cards.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">Full Bleed Trifolds</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-fb-trifold.png" alt="PMD Full Bleed Trifolds" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/GvyZAYwQU4E" data-fancybox="">Video</a> <a title="Precious Memories Designer Full Bleed Trifold Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-Full-Bleed-Trifolds.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<div class="floating-boxprint">
<h4 style="text-align: center;">White Border Trifolds</h4>
<p style="text-align: center;"><img src="https://cdn8.bigcommerce.com/s-dhnujyc7at/product_images/uploaded_images/pmd-wb-trifold.png" alt="PMD White Border Trifolds" width="240" height="240" /></p>
<div style="text-align: center;"><a href="https://youtu.be/Hm1DNGQaY8w" data-fancybox="">Video</a> <a title="Precious Memories Designer White Border Trifolds Print Help" href="https://bass-mollett-publishers.mybigcommerce.com/content/pdf/PMD-White-Border-Trifolds.pdf" rel="noopener noreferrer" target="_blank">PDF</a></div>
</div>
<video id="myVideo" width="640" height="320" style="display:none;" controls="controls"><source src="https://youtu.be/ez93LB4Bv5s" type="video" /><source src="https://youtu.be/BeGhaHoVVcc" type="video" /><source src="https://youtu.be/50F2hmScR_I" type="video" /><source src="https://youtu.be/9oFz4AoInn0" type="video" /><source src="https://youtu.be/lgwT8Bh8K4o" type="video" /><source src="https://youtu.be/lgwT8Bh8K4o" type="video" /><source src="https://youtu.be/pL5UKtsOcgM" type="video" /><source src="https://youtu.be/xirSYv6SgCI" type="video" /><source src="https://youtu.be/Mm4S-Vc5LVU" type="video" /><source src="https://youtu.be/Qz807ghiz30" type="video" /><source src="https://youtu.be/lIFi0v6dckk" type="video" /><source src="https://youtu.be/kKxCYO2CNOE" type="video" /><source src="https://youtu.be/aB7gmtg5nF8" type="video" /><source src="https://youtu.be/3T_6Cqj-WOs" type="video" /><source src="https://youtu.be/PWIBXl641Ng" type="video" /><source src="https://youtu.be/A0iz8Gvvb2w" type="video" /><source src="https://youtu.be/woCLwY7QfdU" type="video" /><source src="https://youtu.be/4zsCVTqbd14" type="video" /><source src="https://youtu.be/iIwg0CfjFbkE" type="video" /><source src="https://youtu.be/qgEPWTTrZd8" type="video" /><source src="https://youtu.be/GvyZAYwQU4E" type="video" /><source src="https://youtu.be/Hm1DNGQaY8w" type="video" /> Your browser doesn't support HTML5 video tag. </video></div>