html5 background video in custom theme

  • Resolved kirtis_njones

    (@kirtis_njones)


    12 years, 6 months ago

    Hello everyone,

    I am attempting my first WordPress theme and am getting around fairly well so far. It is a very minimal theme. Literally just a header and footer that has a slideshow in the header.

    So far I’ve been able to get the header() and footer() to display and insert the slider plugin (Revolution Slider) into the header using a widget and everything seems to work swimmingly.

    The next step to this is I would like to add an html5 background to the page in the template (not with a plugin).

    I’ve been able to get the video background working in my base (non-WP template) but adding the code to the WP version of my template does not seem to be working.

    I’ve searched through the codex and found the

    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form' ) );

    and added to my functions.php however this doesn’t seem to work.

    I’m sure there is something I’m missing here but have no idea what.

    I’m working on a localhost so can not provide a link but let me know if you need any code to be posted.

    Thanks for the support and great documentation to get me this far.

Viewing 3 replies - 31 through 33 (of 33 total)
1 2 3
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    No worries, I can’t sleep due to illness and thought I’d do something to pass the time.

    I’m on Windows 7 & and using latest chrome.

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    Yeah. Just checked it on my home machine.

    Seems to work here on Win7/Chrome.

    Checked it in FF(latest) and IE10 but doesn’t seem to show the video.

    Guess it will have to wait until monday.

    Thanks again for your time. It’s immensely appreciated.

    Konzaales

    (@konzaales)

    11 years, 7 months ago

    Hi!
    in case anyone is still wondering about this, here is what i did without any plugin.
    Thanks to http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video I followed their tutorial about html5 video.

    In order to use this in wordpress you just need to add
    <source src="<?php echo get_template_directory_uri(); ?>/img/video/polina.webm" type="video/webm">

    so with ?php echo get_template_directory_uri(); ?> wordpress is able to find your video.

    Here is my whole code for it

    <video autoplay loop poster="<?php echo get_template_directory_uri(); ?>/img/bg/test.jpg" id="bgvid">
			<source src="<?php echo get_template_directory_uri(); ?>/img/video/polina.webm" type="video/webm">
			<source src="<?php echo get_template_directory_uri(); ?>/img/video/trailer_480p.mov" type="video/mp4">
		</video>

    See that I have two different video files first is from polina example and other one is big bug bunny.
    This is because i jsut wanted to test how this works.

    I used the same css for styling as in polina example.

    Here’s snippet `video#bgvid {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
    }`

    You can place this in any template file or where you want in wordpress.

    Have fun with it.

Viewing 3 replies - 31 through 33 (of 33 total)
1 2 3

The topic ‘html5 background video in custom theme’ is closed to new replies.