I am currently designing a website that includes two identical Vimeo videos. One is intended for larger screen resolutions, while the other is meant for resolutions below 1000px. To achieve this, I have placed both videos on the page and used CSS to control their visibility.
However, I encountered an issue with autoplay on page load. When using the display:none; CSS property, the videos are hidden but continue playing in the background.
I have attempted to resolve this using jQuery and Froogaloops, but so far I have been unsuccessful. Here is my current code:
jQuery(document).ready(function($) {
var player = $("#82625501");
froogaloop = $f(player[0].id);
// Optimization: Store references outside event handler:
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize < 1000) {
froogaloop.api('pause');
}
else {
froogaloop.api('play');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
This implementation works only when resizing the screen, not on initial page load. How can I address this issue? Is there a simpler solution available? Thank you in advance!