WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] html5 background video in custom theme (33 posts)

  1. kirtis_njones
    Member
    Posted 10 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.

  2. kirtis_njones
    Member
    Posted 10 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.

  3. Andrew
    Forum Moderator
    Posted 10 months ago #

    Any chance you could link the site?

  4. kirtis_njones
    Member
    Posted 10 months ago #

    Working on a localhost.

  5. Andrew
    Forum Moderator
    Posted 10 months ago #

    What is HTML output of your video?

  6. kirtis_njones
    Member
    Posted 10 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.

  7. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  8. kirtis_njones
    Member
    Posted 10 months ago #

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

  9. kirtis_njones
    Member
    Posted 10 months ago #

  10. kirtis_njones
    Member
    Posted 10 months ago #

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

  11. Andrew
    Forum Moderator
    Posted 10 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
  12. Andrew
    Forum Moderator
    Posted 10 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

  13. kirtis_njones
    Member
    Posted 10 months ago #

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

  14. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  15. Andrew
    Forum Moderator
    Posted 10 months ago #

  16. kirtis_njones
    Member
    Posted 10 months ago #

    hmm. iv got it displaying on my end here.

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

  17. kirtis_njones
    Member
    Posted 10 months ago #

    hmm.

    i have both videos in both

    /beerworld-growlers/wp-content/themes/beerworldlayout/video/(videofiles)

    and my footer.php in the

    /beerworld-growlers/wp-content/themes/beerworldlayout/footer.php

    where the code in the footer is

    <source src="video/bubbles.webm" type="video/webm">
    <source src="video/bubbles.mp4" type="video/mp4">

    I also made a /beerworld-growlers/video/(video files)

    just in case and that also doesn't seem to work.

  18. Andrew
    Forum Moderator
    Posted 10 months ago #

    Did you resolve the issue?
    http://awesomescreenshot.com/0691vn6k10

  19. kirtis_njones
    Member
    Posted 10 months ago #

    not even sure how you got that.

    that is obviously a screen of the video, but on my end video doesn't show at all

  20. kirtis_njones
    Member
    Posted 10 months ago #

    screenshot of what i have on my end.

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

  21. kirtis_njones
    Member
    Posted 10 months ago #

    ok. figured out that the styles.css is loading from my localhost (and thats why i can see it but you can't) which means i must be loading it incorrectly into my theme.

    this is what i have in my header.php

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    	<head>
    		<meta charset="<?php bloginfo( 'charset' ); ?>" />
    		<title><?php wp_title ( '|', true,'right' ); ?></title>
    
    			<link rel="profile" href="http://gmpg.org/xfn/11" />
    			<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    			<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    			<?php wp_head(); ?>
    	</head>
    <body <?php body_class($class); ?>>
    
    <div id="wrapper">
    
    		<!-- Start Header -->
    		<div id="header">
    			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Slideshow Widget')) : endif; ?>
    
    		</div>
  22. kirtis_njones
    Member
    Posted 10 months ago #

    same thing with the js scripts from my plugin. not sure why some of them are loading from the nikijones.us server and some local

  23. kirtis_njones
    Member
    Posted 10 months ago #

    (sorry. should have noticed that earlier in your post. been a long day)

  24. Andrew
    Forum Moderator
    Posted 10 months ago #

    I'm sorry I cannot experience your issue with the video not playing.

  25. kirtis_njones
    Member
    Posted 10 months ago #

    Ok...so....

    Fixed the issues where

    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

    were referencing localhost. (at least pretty sure i have now)

    not sure why they didn't midigate over even though i defined them in wp-config.php, but whatever. fixed the issue.

    also downloaded and installed the BlankSlate Theme and reworked my theme into that (to be sure that everything was set up correctly and everything was calling things the way they should in WP. as i'm sure in my original theme, i was missing something vital.)

    now. back to my original issue of trying to get the video background to display. -_-

  26. kirtis_njones
    Member
    Posted 10 months ago #

    Ok...so....

    Fixed the issues where

    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

    were referencing localhost. (at least pretty sure i have now)

    not sure why they didn't midigate over even though i defined them in wp-config.php, but whatever. fixed the issue.

    also downloaded and installed the BlankSlate Theme and reworked my theme into that (to be sure that everything was set up correctly and everything was calling things the way they should in WP. as i'm sure in my original theme, i was missing something vital.)

    now. back to my original issue of trying to get the video background to display. -_-

  27. Andrew
    Forum Moderator
    Posted 10 months ago #

    Are you using a browser developer tool like Firebug or the one built into Chrome? If you are can you try deleting all the HTML elements (in the developer toolbar) apart form the video and then see if the issue persists?

    I'm asking this because all I can see is the video on your page, as demonstrated in a screnshot I posted. Perhaps some other elements are overlapping and disguising it?

  28. kirtis_njones
    Member
    Posted 10 months ago #

    hmm. so its playing on your end...

    would you mind checking the site again and seeing how it displays?
    i believe iv fixed the issue with the stylesheet/js not loading properly.

    if everything seems like its working correctly (displaying slideshow with header/footer and background video) would you mind posting a screencap?

  29. Andrew
    Forum Moderator
    Posted 10 months ago #

    Sure http://awesomescreenshot.com/0bc1vnag60 - The bubbles are animated

  30. kirtis_njones
    Member
    Posted 10 months ago #

    well well well

    thats exactly how it is supposed to be showing (atm)
    curious as to why im not getting it on my end.

    tried a few different browsers on different computers in different OS's and still the same.

    i guess i'll have to try checking it outside the office.

    but since you've got it showing on your end, i'm going to call it a night for now.

    thank you for all your help. especially on a friday night. =)

Reply »

You must log in to post.

About this Topic