Embedded videos crash on full screen and reload pa

问题:

I am using iframes to embed YouTube videos on my site. I'm including the allowfullscreen property. On my site, the embedded videos will play fine until I click the "Full screen" button. When it's toggled to full screen, the video will briefly show in full screen mode but then immediately closes and refreshes the page. This issue does not occur in Firefox. It does occur in other browsers such as Edge and Chrome. There are no errors in the console when I inspect in the browser. I've tested with both YouTube and Vimeo videos and the same issue occurs. I've tried embedding with object tags instead of iframes but got the same result. Any ideas what could be causing this?

回答1:

I found the cause of this issue. There was a function in one of the Wordpress theme files that was reloading the page on window resize, which was being triggered when putting the video in full screen mode. I simply took out this code, as it wasn't necessary for my site.

 var initialWidth = $(window).width();
$(window).resize(function()
{
    var currentWidth = $(window).width();
    if( initialWidth !== currentWidth)
    {
        location.reload();
    }
});