Hi, I need to place a selfhosted video background on my domain, I would use a plugin but the ones I found require you to place it page per page, and don’t seem to work with woocommerce, in any case, I want to use html5 with my child theme.
using this code, I’m using it together, I’m not that good with code, but I don’t want the solution per se, I just one to know which template or php file I need to edit in order to (if correct) this background to appear on all pages, I tried content.php but didn’t work, however if you assure me it is for instance, content.php I will keep trying there, what I was looking for was a section, but haven’t find it yet, thank you for your time.
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
window.isIEOld = isIE() && isIE() < 9;
window.isiPad = navigator.userAgent.match(/iPad/i);
var img = $('.video').data('placeholder'),
video = $('.video').data('video'),
noVideo = $('.video').data('src'),
el = '';
if($(window).width() > 599 && !isIEOld && !isiPad) {
el += '';
el += '';
el += '';
} else {
el = '<div class="video-element" style="background-image: url(' + noVideo + ')"></div>';
}
$('.video').prepend(el);
<div class="video" data-video="/inicio/vidback/lights.mp4"></div>
Hi Haziel
A plugin would be ideal. Here is a popular one:
https://wordpress.org/plugins/wpmbytplayer/
If you go the custom development route we can try advise but a plugin is the way to go if you don’t have experience in this area.
Everything above:
needs to be wrapped in a script tag.
http://www.w3schools.com/tags/tag_script.asp
The script can be inserted into your site head using:
https://wordpress.org/plugins/header-and-footer-scripts/
Then for the video. Your URL should be absolute, right now it’s relative:
Make it a full URL.
You’ll need to use a child theme when making any changes to theme files. I haven’t carried something like this out so I’m not certain the best place to place the video. You could copy footer.php from the parent theme into your child theme and then insert the video div just above:
Here is a Vantage child theme if you need one to start out with:
https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip
Here are other plugins to consider:
https://wordpress.org/plugins/search.php?q=video+background
Hello, thanks for the reply, and sorry for taking so long to answer, I had no time to work on this until this morning, well, I’m not amazing with code, but I think there is something wrong with the script I got, so I looked for an alternative.
Thanks for the plugin recommendations, however, it seems they were page specific, or homepage only, but it’s ok, this is what I did, apparently there is a video tag, so I inserted this code inside the body section of header.php
<video autoplay loop poster="vidback/lights.png" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="vidback/lights.mp4" type="video/mp4"> </video>With this CSS in the style sheet:
video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(polina.jpg) no-repeat; background-size: cover; }This placed my video background on all of my pages, all on my child theme (I also copied the folder with the videos inside the Child Theme folder to fix the URL, thanks for that tip)
I leave this here in case someone needs to do the same, for me this worked, thank so much for the tips, the last bit about the “footer.php” helped me find the correct template.
Awesome :) Really glad to hear you made progress. Thanks for sharing.
All the best.