CODEWITHSUNDEEP
phphtmlwordpresswordpress-theming
Chris Mazzochi
Chris Mazzochi

Reputation: 167

Embedding HTML5 Video Into Static Front Page In WordPress

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.

Upvotes: 0

Views: 1329

Answers (2)

Sumanta
Sumanta

Reputation: 1

I have tried to make unmuted & loop video on home page on Wordpress. And final out put came on custome code on wizard.It is easy and simple now just copy - past the code and change your video link.

<video autoplay="" muted="" loop="" id="myVideo"><source src="https://trianglefilms.co.in/wp-content/uploads/2021/01/triangle-films-Main.mp4" type="video/mp4"></video>

Upvotes: 0

Mike
Mike

Reputation: 8877

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"'>

Upvotes: 2

Related Questions