I need to create a website which can be navigated, but after a period of inactivity,

[sstoney200]

I need to create a website which can be navigated, but after a period of inactivity, must loop a video replacing the web content. When a user is to move the mouse or click etc, I need the user to then be able to renavigate the website again.

I have the website test running OK, running from a single page using a function to switch display style of 'home' and 'smartfm' based on the click of the smart_fm_btn(). So between two divs, the website is running fine.

Because this runs from the same page, the inactivity also works really well, and launches the video after 5 seconds of nothing happening.

The issue I have is that I cannot reload the page and get back to the website from the video.

my code as is:

​<div class="container">
          <div id="content" class="content">
             <!--HOME PAGE-->
             <div id="home" style="text-align:center; display:block">
                <img class="logo" src="images/logo.jpg" />
                <a class="button" href=""><img src="images/one-spie.jpg" /></a>
                <a onclick="smart_fm_btn()" class="button" href="#"><img src="images/smart-fm.jpg" /></a>
                <a class="button" href=""><img src="images/who-we-are.jpg" /></a>
             </div>
             <!--END HOME PAGE-->
             <!--SMART FM PAGE-->
             <div id="smartfm" style="text-align:center; display:none">
                <img class="nav" src="images/nav.jpg" />
                <img class="logo-inner" src="images/logo.jpg" />
                <div class="left">
                   <a id="enegyModal" href="#"><img class="nav" src="images/energy.jpg" /></a>
                </div>
                <div class="right">
                   <img class="nav" src="images/predictive.jpg" />
                </div>
                <div id="myModal" class="modal">
                   <!-- Modal content -->
                   <div class="modal-content">
                      <span class="close">&times;</span>
                      <p>Test the Modal..</p>
                   </div>
                </div>
                <!--END SMART FM PAGE-->
             </div>
          </div>
      </div>

var timeoutID;
          
         function setup() {
             this.addEventListener("mousemove", resetTimer, false);
             this.addEventListener("mousedown", resetTimer, false);
             this.addEventListener("keypress", resetTimer, false);
             this.addEventListener("DOMMouseScroll", resetTimer, false);
             this.addEventListener("mousewheel", resetTimer, false);
             this.addEventListener("touchmove", resetTimer, false);
             this.addEventListener("MSPointerMove", resetTimer, false);
          
             startTimer();
         }
         setup();
          
         function startTimer() {
             // wait 5 seconds before calling goInactive
             timeoutID = window.setTimeout(goInactive, 5000);
         }
          
         function resetTimer(e) {
             window.clearTimeout(timeoutID);
          
             goActive();
         }
          
         function goInactive() {
              document.getElementById("content").innerHTML="<object type='text/html' data='video.html' ></object>";
  
         }
          
         function goActive() { 


             startTimer();
          
          
         }

//function to switch display styles 
function smart_fm_btn() {
var x = document.getElementById("smartfm");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}

var y = document.getElementById("home");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}

  }

I can edit and use the following innerHTML element to get back to the website from video, but problem is I then can't navigate anywhere and get caught in an infinite loop of refreshing the goActive function.

function goActive() { 


  document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="images/logo.jpg" /><a class="button" href=""><img src="images/one-spie.jpg" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="images/smart-fm.jpg" /></a><a class="button" href=""><img src="images/who-we-are.jpg" /></a></div><div style="text-align:center; display:block"><img class="nav" src="images/nav.jpg" /><img class="logo-inner" src="images/logo.jpg" /><div class="left"><a id="enegyModal" href="#"><img class="nav" src="images/energy.jpg" /></a></div><div class="right"><img class="nav" src="images/predictive.jpg" /></div><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>Test the Modal..</p></div>'



             startTimer();
          
          
         }

]

Can anyone see how I can manage this task more logically? I've stared at this for so long now I've lost any idea how to progress.

Many thanks in advance,
Jamie