video-gallery | style video gallery with Ajax , infinite scroll | Widget library

My code for a Video Gallery is below and almost everything is working fine, but you can see in the image there is a small "gap" of black color before the image is hovered, is there anyway to remove it or replace the color?

I want to "keep" the transition and the background color.

Here is the code pen: https://codepen.io/wavyblues/pen/poyBbeL

I have these arrays for my navbar.

I am trying to play a flv file using video.js. So far I have included:

I have a gallery of video thumbnails that each have an overlay called .video-overlay that calls a lity.js popup with a dynamic video.

When the video loads in a popup I want it to start playing automatically.

Here is the page with the videos formosapark-hotel.com/hotel-info/video-gallery/

I have tried so many things but I cannot even get an event to fire when the popup loads.

Even if I can get a simulated click on the round button on the video that is displayed on the popup.

Any pointers is really appreciated as I have been stuck on this for hours.

This is the code of the html button that fires the video, is there a way of executing this button from jQuery?

I'm using LightGallery for youtube videos. I´m trying to change the default thumbnail but it does not work.

In the view I have:

I am trying to load all posts that have the video format using AJAX but my request keeps dying and I cannot figure out why. I don't get any errors. I always get a status 200. I cannot for the life of me figure it out and I fell like it is probably something very small.

here is my form:

I'm trying to set up a video gallery and when I'm hovering over a video thumbnail I want my play button to change from opacity: .3 to opacity: 1. I'm trying to achieve this by using a jQuery script with toggleClass(). I've tried using animate() with opacity, which works. But I want to go with the toggleClass() method instead. But when I hover nothing happens.