Image overlay over html5 video

#1

I was reading this post: Overlay image on embedded video and I was wondering what code can be used if you want to add an image overlay on top of an html5 video without stopping the video and also for the image to show up and disappear after specific seconds?

Example if I want to show the the image 30 seconds later and make it disappear 5 seconds later.

You reply will be highly appreciated.

#2

Hi there thebe,

and a warm welcome to these forums. :winky:

Take a peep at this example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container img {
    position: absolute;
    left: -999em;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.8;
    overflow: hidden;
 }

.image-animation {
    animation: showimage 40s;
 }

@keyframes showimage {

75% {
    left: -999em;
  }
75.1% {
    left: 0;
  }
87.6% {
   left: 0;
 }
87.7% {
    left: -999em;
  }
 }

</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <img id="mask" src="https://via.placeholder.com/640x420" width="640" height="420" alt="video mask">
 </div>

<script>
(function( d ) {
   'use strict';
   var ply = d.getElementById( 'player' ),
       msk = d.getElementById( 'mask' );
       ply.addEventListener( 'play', 
          function() {
            msk.classList.add( 'image-animation' );
            }, false );
       ply.addEventListener( 'ended', 
          function() {
            msk.classList.remove( 'image-animation' );
            ply.load();
            }, false );
}( document ));
</script> 

</body>
</html>

…it may suit your requirements. :biggrin:

coothead

#3

Thanks a lot Coohead :slight_smile: I’ll definitely play around with it and report back. Much appreciated.

#4

Awesome. Any ideas on the following:
*Image is not showing if you are in full screen
*How can I position the image at the top left of the video and cover only a third of the screen instead of the entire screen.
*Is it possible to to add more than one image? like image 1 at 10sec the disappear, later image 3 at 30sec etc

Thanks Coohead

#5

When a user selects full screen for a video, then
it is their unalienable right to see only the video.

Change this…

#video-container img {
    position: absolute;
    left: -999em;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.8;
    overflow: hidden;
 }

…to this…

#video-container img {
    position: absolute;
    left: -999em;
    top: 0;
    width: 33.33%;
    height: auto;
    opacity: 0.8;
    overflow: hidden;
 }

Yes, it is. :winky:

Here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container img {
    position: absolute;
    left: -999em;
    top: 0;
    width: 50%;
    height: auto;
    opacity: 0.9;
    overflow: hidden;
 }

.image-animation1 {
    animation: showimage1 15s;
 }
.image-animation2 {
    animation: showimage2 30s;
 }
.image-animation3 {
    animation: showimage3 45s;
 }
.image-animation4 {
    animation: showimage4 60s;
 }
.image-animation5 {
    animation: showimage5 75s;
 }

@keyframes showimage1 {

66.66% {
    left: -999em;
  }
66.7% {
    left: 0;
  }
99.9% {
   left: 0;
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage2 {

83.33% {
    left: -999em;
  }
83.4% {
    left: 100%;
    transform: translate( -100%, 0 );
  }
99.9% {
   left: 100%;
    transform: translate( -100%, 0 );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage3 {

88.88% {
    left: -999em;
  }
88.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
  }
99.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage4 {

91.66% {
    left: -999em;
  }
91.7% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
  }
99.9% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage5 {

93.33% {
    left: -999em;
  }
93.4% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
  }
99.9% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
 }
100% {
    left: -999em;
  }
 }

</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <img id="mask1" src="https://via.placeholder.com/640x420/fff" width="640" height="420" alt="video mask">
  <img id="mask2" src="https://via.placeholder.com/640x420/f00" width="640" height="420" alt="video mask">
  <img id="mask3" src="https://via.placeholder.com/640x420/00f" width="640" height="420" alt="video mask">
  <img id="mask4" src="https://via.placeholder.com/640x420/0f0" width="640" height="420" alt="video mask">
  <img id="mask5" src="https://via.placeholder.com/640x420/f0f" width="640" height="420" alt="video mask">
 </div>

<script>
(function( d ) {
   'use strict';
   var ply = d.getElementById( 'player' ),
       msk1 = d.getElementById( 'mask1' ),
       msk2 = d.getElementById( 'mask2' ),
       msk3 = d.getElementById( 'mask3' ),
       msk4 = d.getElementById( 'mask4' ),
       msk5 = d.getElementById( 'mask5' );

       ply.addEventListener( 'play', 
          function() {
            msk1.classList.add( 'image-animation1' );
            msk2.classList.add( 'image-animation2' );
            msk3.classList.add( 'image-animation3' );
            msk4.classList.add( 'image-animation4' );
            msk5.classList.add( 'image-animation5' );
            }, false );

       ply.addEventListener( 'ended', 
          function() {
            msk1.classList.remove( 'image-animation1' );
            msk2.classList.remove( 'image-animation2' );
            msk3.classList.remove( 'image-animation3' );
            msk4.classList.remove( 'image-animation4' );
            msk5.classList.remove( 'image-animation5' );
            ply.load();
            }, false );
}( document ));
</script> 

</body>
</html>

coothead

#6

Coothead you are amazing. You seem to be breathing code Sir and I appreciate your skill and wish we could work together sometime.

The clock for the images seem to be independent from that of the video, when the video is paused the time for the images continues to count, it is possible to tie the time of the images to the video time so that they can always sync?

Like if the video is paused then all images stop counting and only resume counting when the video resume?

Thebe

#7

Yes, it is :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container img {
    position: absolute;
    left: -999em;
    top: 0;
    width: 50%;
    height: auto;
    opacity: 0.9;
    overflow: hidden;
 }

.image-animation1 {
    animation: showimage1 15s;
 }
.image-animation2 {
    animation: showimage2 30s;
 }
.image-animation3 {
    animation: showimage3 45s;
 }
.image-animation4 {
    animation: showimage4 60s;
 }
.image-animation5 {
    animation: showimage5 75s;
 }

@keyframes showimage1 {

66.66% {
    left: -999em;
  }
66.7% {
    left: 0;
  }
99.9% {
   left: 0;
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage2 {

83.33% {
    left: -999em;
  }
83.4% {
    left: 100%;
    transform: translate( -100%, 0 );
  }
99.9% {
   left: 100%;
    transform: translate( -100%, 0 );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage3 {

88.88% {
    left: -999em;
  }
88.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
  }
99.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage4 {

91.66% {
    left: -999em;
  }
91.7% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
  }
99.9% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage5 {

93.33% {
    left: -999em;
  }
93.4% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
  }
99.9% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
 }
100% {
    left: -999em;
  }
 }
.paused {
   animation-play-state: paused;
 }
</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <img id="mask1" src="https://via.placeholder.com/640x420/fff" width="640" height="420" alt="video mask">
  <img id="mask2" src="https://via.placeholder.com/640x420/f00" width="640" height="420" alt="video mask">
  <img id="mask3" src="https://via.placeholder.com/640x420/00f" width="640" height="420" alt="video mask">
  <img id="mask4" src="https://via.placeholder.com/640x420/0f0" width="640" height="420" alt="video mask">
  <img id="mask5" src="https://via.placeholder.com/640x420/f0f" width="640" height="420" alt="video mask">
 </div>

<script>
(function( d ) {
   'use strict';
   var ply = d.getElementById( 'player' ),
       msk1 = d.getElementById( 'mask1' ),
       msk2 = d.getElementById( 'mask2' ),
       msk3 = d.getElementById( 'mask3' ),
       msk4 = d.getElementById( 'mask4' ),
       msk5 = d.getElementById( 'mask5' );

       ply.addEventListener( 'play', 
          function() {
            msk1.classList.add( 'image-animation1' );
            msk2.classList.add( 'image-animation2' );
            msk3.classList.add( 'image-animation3' );
            msk4.classList.add( 'image-animation4' );
            msk5.classList.add( 'image-animation5' );
            msk1.classList.remove( 'paused' );
            msk2.classList.remove( 'paused' );
            msk3.classList.remove( 'paused' );
            msk4.classList.remove( 'paused' );
            msk5.classList.remove( 'paused' );
            }, false );

       ply.addEventListener( 'pause', 
          function() {
            msk1.classList.add( 'paused' );
            msk2.classList.add( 'paused' );
            msk3.classList.add( 'paused' );
            msk4.classList.add( 'paused' );
            msk5.classList.add( 'paused' );
            }, false );

       ply.addEventListener( 'ended', 
          function() {
            msk1.classList.remove( 'image-animation1' );
            msk2.classList.remove( 'image-animation2' );
            msk3.classList.remove( 'image-animation3' );
            msk4.classList.remove( 'image-animation4' );
            msk5.classList.remove( 'image-animation5' );
            ply.load();
            }, false );
}( document ));
</script> 

</body>
</html>

coothead

#8

Awesome, i will try that first thing in the morning.

Is possible to also show an iframed webpage and replace image?

#9

Yes, it is. :biggrin:

But, is it a good idea? :eek:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container iframe {
    position: absolute;
    left: -999em;
    top: 0;
    width: 50%;
    height: 50%;
    /*opacity: 0.9;
    overflow: hidden;*/
    background-color:#fff;
 }

.image-animation1 {
    animation: showimage1 15s;
 }
.image-animation2 {
    animation: showimage2 30s;
 }
.image-animation3 {
    animation: showimage3 45s;
 }
.image-animation4 {
    animation: showimage4 60s;
 }
.image-animation5 {
    animation: showimage5 75s;
 }

@keyframes showimage1 {

66.66% {
    left: -999em;
  }
66.7% {
    left: 0;
  }
99.9% {
   left: 0;
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage2 {

83.33% {
    left: -999em;
  }
83.4% {
    left: 100%;
    transform: translate( -100%, 0 );
  }
99.9% {
   left: 100%;
    transform: translate( -100%, 0 );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage3 {

88.88% {
    left: -999em;
  }
88.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
  }
99.9% {
    left: 100%;
    top: 100%;
    transform: translate( -100%, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage4 {

91.66% {
    left: -999em;
  }
91.7% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
  }
99.9% {
    left: 0;
    top: 100%;
    transform: translate( 0, -100% );
 }
100% {
    left: -999em;
  }
 }

@keyframes showimage5 {

93.33% {
    left: -999em;
  }
93.4% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
  }
99.9% {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
 }
100% {
    left: -999em;
  }
 }
.paused {
   animation-play-state: paused;
 }
</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <iframe id="mask1" src="https://www.coothead.co.uk/currency-converter/"></iframe>
  <iframe id="mask2" src="https://www.coothead.co.uk/circular-menu/menu.html"></iframe>
  <iframe id="mask3" src="https://www.coothead.co.uk/all-google-fonts/"></iframe>
  <iframe id="mask4" src="https://www.coothead.co.uk/superhacker/4-image-animation.html"></iframe>
  <iframe id="mask5" src="https://www.coothead.co.uk/responsive-gallery/"></iframe>
 </div>

<script>
(function( d ) {
   'use strict';
   var ply = d.getElementById( 'player' ),
       msk1 = d.getElementById( 'mask1' ),
       msk2 = d.getElementById( 'mask2' ),
       msk3 = d.getElementById( 'mask3' ),
       msk4 = d.getElementById( 'mask4' ),
       msk5 = d.getElementById( 'mask5' );

       ply.addEventListener( 'play', 
          function() {
            msk1.classList.add( 'image-animation1' );
            msk2.classList.add( 'image-animation2' );
            msk3.classList.add( 'image-animation3' );
            msk4.classList.add( 'image-animation4' );
            msk5.classList.add( 'image-animation5' );
            msk1.classList.remove( 'paused' );
            msk2.classList.remove( 'paused' );
            msk3.classList.remove( 'paused' );
            msk4.classList.remove( 'paused' );
            msk5.classList.remove( 'paused' );
            }, false );

       ply.addEventListener( 'pause', 
          function() {
            msk1.classList.add( 'paused' );
            msk2.classList.add( 'paused' );
            msk3.classList.add( 'paused' );
            msk4.classList.add( 'paused' );
            msk5.classList.add( 'paused' );
            }, false );

       ply.addEventListener( 'ended', 
          function() {
            msk1.classList.remove( 'image-animation1' );
            msk2.classList.remove( 'image-animation2' );
            msk3.classList.remove( 'image-animation3' );
            msk4.classList.remove( 'image-animation4' );
            msk5.classList.remove( 'image-animation5' );
            ply.load();
            }, false );
}( document ));
</script> 

</body>
</html>

Note:-

If you are planning to use this code, then “CSS” and “JavaScript”
code needs to be moved to external files. :winky:

coothead

#10

Wow! iframe works.

Thank you so much Sir.

Mr Coothead, how can i get this to work on full screen? I really need that to work

Can we disable the scrollbars and the border?

Is it not possible to user the opacity for the iframe?

#11

You cannot. :unhappy:

No to the former :wonky: and yes.to the latter. :winky:

#video-container iframe {
    position: absolute;
    left: -999em;
    top: 0;
    width: 50%;
    height: 50%;
    border: 0;
    background-color:#fff;
 }

coothead

1 Like
#12

:laughing:thank for the video… but why not fullscreen? What’s preventing us from achieving that?

#13

Thanks the border have disappeared, is it possible to do the same with the scrolling bars?

#14

If you don’t want scrollbars, you can use this…

  <iframe src="#" scrolling="no"></iframe>

…but note that this is a deprecated attribute and will
cause code validation failure. :eek:

It would have been possible a few years ago by setting
z-index: 2147483647; to the img or iframe elements.

Overlay on HTML5 Fullscreen Video

Browser vendors, of late though, have stopped it as it was,
I presume, considered to be rather obtrusive behaviour. :shifty:

coothead

1 Like
#15

Thanks Coothead, scrolling bars disappeared but content not scrollable. But it’s ok at list you gave me an idea.

How can we tie the time of the image with that of the video even if you fast forward the the video? when you skip or reverse some seconds of the video, the image is no longer appearing at the correct spot on the video

#16

Hi there thebe,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container iframe {
    position: absolute;
    width: 50%;
    height: 50%;
    border: 0;
    background-color:#fff;
 }
#mask1 {
    top: 0;
    left:0;
 }
#mask2 {
    top: 0;
    right:0;

 }
#mask3{
    right: 0;
    bottom: 0;
 }
#mask4{
    bottom: 0;
    left: 0;
 }
#mask5{
    top: 25%;
    left: 25%;
 }
.hide {
    display: none;
 }
</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <iframe id="mask1" class="hide" src="https://www.coothead.co.uk/currency-converter/"></iframe>
  <iframe id="mask2" class="hide" src="https://www.coothead.co.uk/circular-menu/menu.html"></iframe>
  <iframe id="mask3" class="hide" src="https://www.coothead.co.uk/all-google-fonts/"></iframe>
  <iframe id="mask4" class="hide" src="https://www.coothead.co.uk/superhacker/4-image-animation.html"></iframe>
  <iframe id="mask5" class="hide" src="https://www.coothead.co.uk/responsive-gallery/"></iframe>
 </div>

<script>
(function( d ) {
   'use strict';
   var ply = d.getElementById( 'player' ),
       msk1 = d.getElementById( 'mask1' ),
       msk2 = d.getElementById( 'mask2' ),
       msk3 = d.getElementById( 'mask3' ),
       msk4 = d.getElementById( 'mask4' ),
       msk5 = d.getElementById( 'mask5' );

       ply.addEventListener( 'timeupdate', 
       function() {
         if ( ply.currentTime >= 10 && ply.currentTime <= 15 ){
              msk1.classList.remove( 'hide' );
           }
         else {
              msk1.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 25 && ply.currentTime <= 30 ){
              msk2.classList.remove( 'hide' );
           }
         else {
               msk2.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 40 && ply.currentTime <= 45 ){
              msk3.classList.remove( 'hide' );
           }
         else {
              msk3.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 55 && ply.currentTime <= 60 ){
              msk4.classList.remove( 'hide' );
           }
         else {
              msk4.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 70 && ply.currentTime <= 75 ){
              msk5.classList.remove( 'hide' );
           }
         else {
              msk5.classList.add( 'hide' );
           }
        }, false );

       ply.addEventListener( 'ended', 
       function() {
         ply.load();
        }, false );
}( document ));
</script> 

</body>
</html>

coothead

#17

Awesome :slight_smile: it works like a charm. Thank you so much.

Ho can i make content to still be scrollable even if I remove the scroll bars?

#18

Alright Mr Coothead, I am nervous about what I’m about to ask you as it sound too complex for my head.

From the latest code we have which now have the perfect time synchronization between the image/iframe and the video:

Can we now have an image appearing at the top left corner as usual and when you tap of it, then the video pause and at the same time the iframe appear at the top right? However if you don’t tap on the image then the image will disappear, the video will keep playing and no iframe will show up.

10 sec later another image shows up but still at the same position(top left) and also if you tap it then video pause and iframe show up at the top right corner…:thinking:

#19

This was very easy to code for Firefox, but
appeared to be impossible for Chrome. :wonky:

Eventually, I found a possible solution, which
entailed swapping iframes rather than attributes.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#video-container {
    position: relative;
    max-width: 40em;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#video-container video {
    display: block;
    width: 100%;
    height: auto;
 }

#video-container iframe { 
    position: absolute;
    width: 50%;
    height: 50%;
    border: 0;
    background-color:#fff;
 }

#mask1 ,#mask1a{
    top: 0;
    left:0;
 }

#mask2, #mask2a {
    top: 0;
    right:0;

 }

#mask3, #mask3a{
    right: 0;
    bottom: 0;
 }

#mask4, #mask4a{
    bottom: 0;
    left: 0;
 }

#mask5, #mask5a{
    top: 25%;
    left: 25%;
 }

.hide {
    display: none;
 }

</style>

</head>
<body>

 <div id="video-container">
  <video id="player" preload controls>
   <source src="https://www.coothead.co.uk/videos/to-be-or-not-to-be.m4v" type="video/mp4">
  </video>
  <iframe id="mask1" class="hide" src="https://www.coothead.co.uk/currency-converter/"></iframe>
  <iframe id="mask1a" class="hide" src="https://www.coothead.co.uk/currency-converter/"></iframe>
  <iframe id="mask2" class="hide" src="https://www.coothead.co.uk/circular-menu/menu.html"></iframe>
  <iframe id="mask2a" class="hide" src="https://www.coothead.co.uk/circular-menu/menu.html"></iframe>
  <iframe id="mask3" class="hide" src="https://www.coothead.co.uk/all-google-fonts/"></iframe>
  <iframe id="mask3a" class="hide" src="https://www.coothead.co.uk/all-google-fonts/"></iframe>
  <iframe id="mask4" class="hide" src="https://www.coothead.co.uk/superhacker/4-image-animation.html"></iframe>
  <iframe id="mask4a" class="hide" src="https://www.coothead.co.uk/superhacker/4-image-animation.html"></iframe>
  <iframe id="mask5" class="hide" src="https://www.coothead.co.uk/responsive-gallery/"></iframe>
  <iframe id="mask5a" class="hide" src="https://www.coothead.co.uk/responsive-gallery/"></iframe>
 </div>

<script>
(function( d ) {
   'use strict';

   var c,

       ply = d.getElementById( 'player' ),

       msk1 = d.getElementById( 'mask1' ),
       msk2 = d.getElementById( 'mask2' ),
       msk3 = d.getElementById( 'mask3' ),
       msk4 = d.getElementById( 'mask4' ),
       msk5 = d.getElementById( 'mask5' ),

       msk1a = d.getElementById( 'mask1a' ),
       msk2a = d.getElementById( 'mask2a' ),
       msk3a = d.getElementById( 'mask3a' ),
       msk4a = d.getElementById( 'mask4a' ),
       msk5a = d.getElementById( 'mask5a' ),

       allMsks = d.querySelectorAll( 'iframe' );

   for ( c = 0; c < allMsks.length; c += 2 ) {   
         allMsks[ c ].setAttribute( 'scrolling', 'no' );
         allMsks[ c ].addEventListener( 'mouseover', removeBars( c ), false ); 
    }

   for ( c = 1; c < allMsks.length; c += 2 ) {      
         allMsks[ c ].addEventListener( 'mouseout', addBars( c ), false );
    }

   function removeBars( c ) {
         allMsks[ c ].onmouseover =  function() {
         allMsks[ c + 1 ].classList.remove( 'hide' );
         allMsks[ c ].classList.add( 'hide' );
         };
     }

   function addBars( c ) {
         allMsks[ c ].onmouseout =  function() {
         allMsks[ c - 1 ].classList.remove( 'hide' );
         allMsks[ c  ].classList.add( 'hide' );
         };
     } 

    ply.addEventListener( 'timeupdate', 
       function() {
         if ( ply.currentTime >= 10 && ply.currentTime <= 15 ){
              msk1.classList.remove( 'hide' );  
           }
         else {
              msk1.classList.add( 'hide' );  
           }
         if ( ply.currentTime >= 25 && ply.currentTime <= 30 ){
              msk2.classList.remove( 'hide' );
           }
         else {
               msk2.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 40 && ply.currentTime <= 45 ){
              msk3.classList.remove( 'hide' );
           }
         else {
              msk3.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 55 && ply.currentTime <= 60 ){
              msk4.classList.remove( 'hide' );
           }
         else {
              msk4.classList.add( 'hide' );
           }
         if ( ply.currentTime >= 70 && ply.currentTime <= 75 ){
              msk5.classList.remove( 'hide' );
           }
         else {
              msk5.classList.add( 'hide' );
           }
        }, false );

       ply.addEventListener( 'ended', 
       function() {
         ply.load();
        }, false );

}( document ));
</script> 

</body>
</html>

coothead

#20

Have a look here…

https://www.coothead.co.uk/thebe/

…and get all the files here…

https://www.coothead.co.uk/thebe.zip

coothead

1 Like