Hi did you manage to resolve this? I am trying to do the same thing and so far no luck…
No, I was disappointed that I got no help with this post in 4 months, and I did not accomplish this goal. Perhaps someone can comment. i know it is possible to put video in the header, but I was not able to determine what format to use, and how to get it there.
ok so far I have video in my header! yay! I am just having some problems with it autoplaying in Firefox. NOTE I am not exactly a developer but by Googling and experimenting I have sort of figured this out, so there is probably a much better way to do this.
Install the VideoJS plugin (http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/) – this allows HTML5 video playback and it will automatically display an image if playback is not supported.
You will need you video in several formats – you can read more about VideoJS on their site http://videojs.com . I used Miro video convertor http://www.mirovideoconverter.com/ .
Create a new php file called “home_video.php” or whetever u want to call it. put the embed code (see the VideoJS website) in here with the right paths to your various videos.
Then open your header.php file and call the home_video.php like this:
‘<?php if(is_front_page()):?>
<?php include( TEMPLATEPATH . ‘/includes/home_video.php’); ?>’
I want my video to only appear on the front page, so I put it with the other stuff that only displays on the home page. But generally put this code where you want it to appear in your header, eg. after the main nav.
this is basically how I got it to work – if I come across a better way to do it I post it here. I still need to position it etc using css and like I said I am having some trouble with it not autoplaying in Firefox…
Thanks for the great explanation!
Please post as you solve these problems. This will be a big help to everyone.
Thanks!
banannah!!!
You are reading my mind.
I have had videojs plugin for a while but I still dont know how to get the video in the header!
Creating a php file is where I get lost.
Any way you can send me the php file that you used?
Thank You!!
The php file basically just has the embed code in it – I am not sure if this is the ‘right’ way to do it, but it does work…
Anyway here’s the code I used (note, you can change the options to suit what you want it to look like and do – see the VideoJS website for a detailed explaination on the embed code parameters you can include)
<div id="slideshow" class="clearfix"> <!-- I just used thsi class as I was replacing the slideshow in my theme with the video and it is already all in the right place etc, but you could create your own I guess__>
<div id="home_video" class="clearfix" align="center">
<div class="video-js-box">
<video class="video-js" width="620" height="349" autoplay="true" preload="auto" poster="http://www.yourwebsite.com/video/poster.jpg" tabindex="0" style="height: 349px;">
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.yourwebsite.com/cms/video/test_vid.mp4"></source>
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.yourwebsite.comm/cms/video/test_vid.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.yourwebsite.com/cms/video/video/test_vid.ogg"></source>
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="false" />
<param name="flashvars" value='config={"playlist":["http://www.yourwebsite.com/cms/video/poster.jpg", {"url": "http://www.yourwebsite.com/cms/video/test_vid.mp4","autoPlay":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://www.yourwebsite.com/cms/video/poster.jpg" width="620" height="3494" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>
</div>
</div>
Thanks, great info!
I’m going to try this again when I get a chance.
banannah!!
I made my php file.
When I paste this….
‘<?php if(is_front_page()):?>
<?php include( TEMPLATEPATH . ‘/includes/home_video.php’); ?>’
in the header.php file and refesh my page I get an error message and my page does not load.
“Parse error: syntax error, unexpected ‘<‘ in /home/jcmcdonald/mcdevelop.com/mdn/wp-content/themes/thematic/header.php on line 78”
where in the header.php file are you pasting this?
what were your steps?
Hey there
I think you need to end your “if statement” so it looks like this:
‘<?php if(is_front_page()):?>
<?php include( TEMPLATEPATH . ‘/includes/home_video.php’); ?>
<?php endif; ?>/’
If you want it to appear on all pages leave the if statement out so it just says:
‘<?php include( TEMPLATEPATH . ‘/includes/home_video.php’); ?>’
In the theme I am using there is already an “if statement” for things that only appear on the front page so I just pasted the line above in there, between the start ( <?php if(is_front_page()):?> ) and the end ( <?php endif; ?>/ )
ps ignore the backticks ( ‘ ) around the code above
banannah!
You have been great!
I got the video in the header, but is there any chance you would know a way to get the video into the “<div id=’branding’>”?
the site i am working on is at http://www.mcdevelop.com/mdn
Just thought I would ask.
It’s been driving me crazy!
There has to be a way!
What if I wanted to more content in my branding div, like a logo or more text?
Someone has to know how to create a div within a div, whether it be using a hook or plugin.
you can put any html (images, text, iframes, whatever) within an existing div, or a div within a div. Or a div within a div within a div…
Just open your php file and find the div you’re looking for and put stuff in it 🙂
Just make sure you close all your div tags etc </div> – remember that HTML and php have a nested structure
