Description: I'm trying to create a site with 2 background videos. When the screen is upright, one vertical video should be displayed, and when I flip the screen to the horizontal position horizontal video should appear instead of the first one (vertical video).
Problem: When I scroll through the page on my iPhone both of the background videos disappears. Everything works well on Desktop, but the videos disappear only on mobile devices.I think the problem is in the $(window).resize function, but I don't know how to solve it.
document.addEventListener("DOMContentLoaded", () => {
// Adding a class at a specific resolution
if ($(window).width() > 537) {
$(".mainVideo").html(
'<video playsinline autoplay muted loop><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/desktop/doberFHD.mp4" type="video/mp4" /><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/desktop/dober2k.webm" type="video/webm"/></video>'
);
} else {
$(".mainVideo").html(
'<video playsinline autoplay muted loop><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/mobile/dober480.mp4" type="video/mp4" /><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/mobile/dober720.webm" type="video/webm" /></video>'
);
}
// this is used whenever the window is resized
$(window).resize(function () {
if ($(window).width() > 537) {
$(".mainVideo").html(
'<video playsinline autoplay muted loop><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/desktop/dober720p.mp4" type="video/mp4" /><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/desktop/dober720p.webm" type="video/webm" /></video>'
);
} else {
$(".mainVideo").html(
'<video playsinline autoplay muted loop><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/mobile/dober480.mp4" type="video/mp4" /><source src="https://dober.agency/wp-content/themes/dober-agency/assets/video/mobile/dober720.webm" type="video/webm" /></video>'
);
}
});
});