My suggestion :
- Make a specific video splash template inside of your WordPress theme incorporating a link to visit the rest of your site.
- Put in your web directory a specific CSS file for full screen video support.
- Make a new empty page using the splash template and use this page as your homepage in your WordPress blog or website.
Technical details :
*Use and adapt this code for making your video splash template and save it as “splash.php” and put this in your WordPress theme folder – More background info can be found here: http://codex.wordpress.org/Page_Templates –>*
<?php
/*
Template Name: Splash
*/
?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Pe Vermeersch</title>
<meta name = "description" content="My website"/>
<meta name = "keywords" content="My keywords"/>
<link rel="stylesheet" type="text/css" href="https://wordpress.stackexchange.com/questions/107149/css/video.css" />
<style type="text/css">
<!--
body {
background-image: url('images/background.jpeg');
background-color: #000000;
}
.style2 {color: #666666}
.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!--SPLASH page -->
</style><title>Splash</title></head>
<body>
<!--Just change video source here, leave type="" intact, all video types needed for browser compatability-->
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">
<source src="videos/splash.mp4" type="video/mp4"/>
<source src="videos/splash.webm" type="video/webm"/>
<source src="videos/splash.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/>
Video not supported.
</video>
<p align="center" class="style1">enter website <a href="http://www.my_wordpress_site.org/news/">here</a></p>
<div class="footer"></div>
</body>
Use this CSS code for making your spash video full screen and save it as “https://wordpress.stackexchange.com/questions/107149/css/video.css” in your CSS directory –>
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width:100%;
min-height:100%;
max-height:4000%;
max-width:1000%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
As an example see my own WordPress site with video splash page using the code above :