Let me start by saying I'm not a web developer. I barely know enough HTML to be able to edit templates to show what I need them to show.
I have an HTML template I purchased which uses lightbox to display an image gallery. I thought it would be fine to replace the links to the images the template used with links to YouTube videos I want displayed instead. However, I have a very weird problem with the page. When viewed locally (from my hard drive copy), the videos play fine. However, when viewed online after uploading to the server, the lightbox opens up when clicked on, but stays stuck at trying to load the video. They never come up. Here's the code snippet used to display the video in my template.
<a class="c-image-overlay t-image-overlay js-lightbox" href="https://www.youtube.com/watch?v=hQtFLkwXaN8" data-lightbox-hidpi="" title="Deadalus' Last Flight" data-lightbox-gallery="portfolio">
<img src="assets/images/portfolio/orchestral_450x300_halftone_BW.png" alt="">
<div class="c-image-overlay__content">
<h3>
Orchestral
</h3>
<hr class="c-image-overlay__deco-line t-image-overlay__deco-line" />
<p>
Orchestral piece that would fit nicely as a film theme.
</p>
</div>
</a>
I can replace the code by the embed code provided by YouTube, and it works, but I lose all the layout functionality I had before (along other things). Any help with getting this to work properly is really appreciated. Otherwise, I'll just need to replace these lightboxes with something else. Thanks in advance!