Resolve an issue when multiple oEmbed videos become the same

See the issue documented on this page where two different YouTube oEmbeds on the same page display the same video after someone has viewed the page, browsed to another page and then used the back button to return to the page with multiple video oEmbeds.

Here’s my own assessment of the issue and my fix.

The issue appears to occur when a page with multiple video oEmbeds is visited using the browsers cache such as when the user uses the browsers back button.

We can fix this issue by finding a way to force the page to reload or load a fresh version each time to page is visited or revisited.

The main limitation is that you need to know what pages will have multiple oEmbed videos and use there page id’s to identify when there are being viewed/loaded.

What we do is set a sessionStorage cookie called visited_vid_page on the first visit to the page. On subsequent visits to this page we look for the visited_vid_page cookie, if it has been set to TRUE we reload the page and alleviate the issue where the oEmbeds would have loaded as the same video. If the visited_vid_page cookie has not been set yet then we set it to TRUE.

See below:

<?php
	global $post;
	$current_page_id = $post->ID;
	if ( 23940 == $current_page_id ) {
	?>
		<script>
			if (sessionStorage.getItem("visited_vid_page")) {
				sessionStorage.removeItem("visited_vid_page");
				window.location.reload(true); // force refresh of page 23940
			} else {
				sessionStorage.setItem("visited_vid_page", "True");
			}
		</script>
	<?php
	} else {
	?>
		<!-- Do something here if you want to -->
	<?php
	}
?>

Revisions

Tags: , ,

No comments yet.

Leave a Reply