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 15 replies - 1 through 15 (of 33 total)
1 2 3
  • Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    I guess it would also help to know that using Firebug, the <video> element is being loaded on the front end, but not displaying.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Any chance you could link the site?

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    Working on a localhost.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    What is HTML output of your video?

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    not sure what you mean, but this is the code im trying to insert in to the theme (footer.php) to display the background video.

    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
		<source src="video/bubbles.webm" type="video/webm">
		<source src="video/bubbles.mp4" type="video/mp4">
		Video not supported
	</video>

    like i said, works in my base (non-WP) template, but doesn’t show when i transfer it to WP.

    firebug shows the markup for the video in WP, and i’m pretty certain i have my paths set up correctly, but the video does not show when trying to do it with my WP template.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    I’m sorry, but we need to see the site to help with this.

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    I’ll see if I can throw it up on our test server. Hopefully won’t take too long.

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    Link to the site

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    pay no attention to the fact that the slider is all fubr’ed.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Looking at your JavaScript errors it looks like you’re missing a JS file:

    GET http://localhost/beerworld-growlers/wp-content/themes/beerworldlayout/style.css  nikijones.us/:8
GET http://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=3.7  nikijones.us/:11
GET http://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/captions.css?ver=3.7  nikijones.us/:12
GET http://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=3.7  nikijones.us/:15
GET http://localhost/beerworld-growlers/wp-content/plugins/revslider/images/transparent.png  nikijones.us/:37
Uncaught ReferenceError: revslider_showDoubleJqueryError is not defined (index):1026

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    pay no attention to the fact that the slider is all fubr’ed.

    Didn’t know you had a slider http://snag.gy/KvnQj.jpg

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    strange. template creates a space for the video (no surprise there)
    styles.css is loading but the #video_background id is missing.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Where is your video, can you link the URL where it exists?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    These are the 2 files your site cannot load, at these URLs:
    – http://nikijones.us/beerworld-growlers/video/bubbles.webm
    – http://nikijones.us/beerworld-growlers/video/bubbles.mp4

    Thread Starter kirtis_njones

    (@kirtis_njones)

    12 years, 6 months ago

    hmm. iv got it displaying on my end here.

    http://i.imgur.com/gJOV72j.jpg

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

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