События jQuery не запускаются при начальной загрузке страницы

Следующий php выводит на мою страницу различные видео с именем класса «.videos»:

<?php
wp_video_shortcode($attr, $content);
?>

Сгенерированный код для каждого видео выглядит так:

<video class="videos" poster="/poster.png" preload="none" controls="controls">
<source type="video/mp4" src="/VideoPreview_04.mp4?_=1">
</video>

Следующий jquery — убрать элементы управления видео и заставить каждый из них играть при наведении мыши и приостанавливать при наведении мыши:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".videos").removeAttr("controls");

jQuery(".videos").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
});
</script>

ЭТА ПРОБЛЕМА:

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

Я уверен, что это связано с делегированием или чем-то вроде этого.
Следующее, например, работает, когда страница загружена, не щелкая сначала где-нибудь на странице:

jQuery(document).on('focus mouseover', '.videos',  function(e){
alert("focused on " + jQuery(e.target).attr('id'));
});

Однако при привязке видео к вышеуказанному коду видео не реагирует, если только вы снова не нажмете где-то сначала страницу.

Я также пробовал document.focus (); и другие способы сфокусироваться на различных элементах, но не могут заставить его работать.

Помогите, у меня кончились волосы, чтобы вытащить 🙁