querySelector()
returns null
if no matches are found, so wrap the code that depends on imagineVideo
in a conditional statement.
var imagineVideo = document.querySelector('.page-id-36 .et_pb_video_box video');
if ( imagineVideo ) {
imagineVideo.play();
imagineVideo.loop = true;
imagineVideo.controls = false;
}
If you only want this code to be loaded on the homepage, you can put it in a separate file and only enqueue it if the homepage is being viewed. For example, you’d place the code above in {your-theme}/js/homepage-video.js
. Then you’d enqueue both the main video player script and homepage-video.js
:
add_action( 'wp_enqueue_scripts', 'wpse_homepage_video_script' );
function wpse_homepage_video_script() {
if ( is_front_page() ) {
// Enqueue the main video player.
wp_enqueue_script(
'video-player',
get_stylesheet_directory_uri() . '/js/video-player.js',
array(),
null,
true
);
// Enqueue the JS that controls the video on the homepage.
wp_enqueue_script(
'wpse-homepage-video',
get_stylesheet_directory_uri() . '/js/homepage-video.js',
array( 'video-player' ),
null,
true
);
}
}