Skip to content
Video Spash Screen Overlay Script

Video Spash Screen Overlay Script

PHP Code Snippets > Video Spash Screen Overlay Script

by Steve Dawson Web Developer


Displaying a video from YouTube on your website is a great way to provide a bit of interaction. To make it a bit more presentable did you know that you can have your own splash screen overlay before the video starts with using a little bit of JavaScript and HTML.

First steps are to create an image the same size as the video which will be on your website. This image can be an advert, introduction or just a simple black screen with a play button on. You will get more video views if you have the image which catches the eyes and makes the website visitor want to click the image and view the video.


The Video Source Div

Grab the link URL from YouTube of the video you would like to use, then wrap it in a div as below on your page where you want the video to appear:

 <div style="display: none">
<iframe width="650" height="494" src="http://www.youtube.com/embed/4LTZms54FXs?list=PL-EwswMO8z8isLTRUuWaYtVtrHFt3-9jl" frameborder="0" allowfullscreen></iframe>
</div>

The Video Splash Screen Div

Now the splash screen we want to use, we add to another div...

 <div onclick="actualNextSibling(this).style.display=block; this.style.display=none">
<img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>

Now all we need to do is to add the javascript to the head of the document which will activate the onclick. So add the following to between the of your page.

The JavaScript

 <script type="text/javascript">
    function actualNextSibling(el) { 
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>

The Demo

Click the YouTube splash screen below to view the video.

youtube video splash screen

Then you are good to go. The full script can be downloaded from the download section.


Free Quote available for any custom PHP and Database Software, Contact Steve Dawson Today