Создание кликабельного наложения

Question

После полудня,

У меня небольшая проблема с шаблоном, и я был бы признателен за небольшую помощь, если бы вы могли указать мне направление на любого, кто может помочь.

Мы работаю над новым сайтом и у меня есть страница портфолио с видео, где он показывает небольшой предварительный просмотр нашего видео, когда вы наводите курсор https://dev.mintyslippers.com/video-preview/

У меня 2 гола. Во-первых, сделать видео активным кликабельно, поскольку единственный способ просмотреть элемент портфолио - щелкнуть ссылку ниже. Я предполагаю, что мне нужно добавить или изменить оверлей, который будет кликабельным?

Моя цель растянуть - сделать так, чтобы оверлей выглядел как https://dev.mintyslippers.com/text-sliding/but, где также темнеет при наведении курсора как https://dev.mintyslippers.com/shader/

Все это просто для удобства пользователя. Хорошо выглядит, что он воспроизводит видео, когда вы наводите курсор, но для меня имеет смысл, что он должен быть кликабельным.

Я уже обратился к разработчикам шаблонов, но по понятным причинам они не предлагают никаких пользовательских опций работы.

Если это поможет, я считаю, что он использует MediaElement. js и скрывает элементы управления.

Большое спасибо

Answer 1

Вам необходимо прикрепить eventListener к элементу HTML, в котором находится ваше видео. Интересующий вас EventListener будет называться "onMouseOver ()". Посмотрите на этот слегка измененный пример, который я сделал ниже:

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

let videoElement = document.getElementById("yourVideoElement");
videoElement.addEventListener("mouseover", function( event ) { 
  // highlight the mouseover target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);