How to make a video play for homepage?

Question

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 :

http://www.pe-vermeersch.com

Related Posts: