Embedding HTML5 Video Into Static Front Page In WordPress

Question

I am trying to create a splash type page using the static front page method in WordPress, and I am trying to get a four second video to play when the page is loaded. I know how to get the video to autoplay that is not the issue. The issue is the vid isn't displaying.

I was able to create the static front page by creating a front-page.php template file. The code I placed in this file is as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Iron Triangle Films Splash Page</title>
  <link rel="stylesheet" href="css/styles.">
    <style>
    .mainContent{
     margin-left: 275px;
    }
    </style>
  </head>
<body>

 <div style="border:solid 1px black;"class="mainContent">

 <video id="my_video" height="500" width="700" autoplay>

 <source src=itf.mp4 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

 <source src=itf.ogv type='video/ogg; codecs="theora, vorbis"'>

  <p>Your browser does not support HTML5 video.</p>
 </video>

 </div><!--End Main Content div-->

</body>
</html>

The page loads as the front page, but the vid does not display. Here's a link to the site.

Thanks for responding. Why can't it find it? The file 'itf.mp4' is in the same directory as the front-page.php file. It doesn't even need to go into another folder such as a 'video' folder. It should be able to find it. What is missing? I'd appreciate it. Thanks, CM – — Chris Mazzochi

Mike Mike · Accepted Answer · 2014-08-22T14:02:07

The problem is that your video file itf.mp4 doesn't exist, so the browser can't play it.

The browser is looking here: http://irontrianglefilms.com/itf.mp4

Which, as you can see, 404s (in a very spammy HostGator way :().

It's quite likely that you've placed the video file in your theme directory, which isn't the same directory as far as the browser is concerned. You can either place the file in your web root (bad idea), or properly link to the file:

<source src="<?php echo get_bloginfo('template_directory'); ?>/itf.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

Embedding HTML5 Video Into Static Front Page In WordPress

2 Answers