Cover Image not showing when page loads but shows after hover

Hi all,
I used this templet and added some extra code and changes to the lightbox in the Grid section, to make the cover image hide, then video starts playing when mouse hover, and the video stops, cover image comes back when mouse moves away.

It works like a charm but not when the page first loads, the cover image is not appearing until mouse hover for the first time. The cover image is set to be on top of everything and the initial state of cover image is set to 100% opacity in the [lightbox link A] mouse hover interaction. Can anyone help spot the issue?

Here is my public share link: LINK
(how to access public share link)