WordPress.org

Forums

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

  1. kirtis_njones
    Member
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

    Any chance you could link the site?

  4. kirtis_njones
    Member
    Posted 2 years ago #

    Working on a localhost.

  5. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    What is HTML output of your video?

  6. kirtis_njones
    Member
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

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

  8. kirtis_njones
    Member
    Posted 2 years 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 2 years ago #

  10. kirtis_njones
    Member
    Posted 2 years ago #

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

  11. Andrew Nevins
    Forum moderator
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

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

  15. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

  16. kirtis_njones
    Member
    Posted 2 years ago #

    hmm. iv got it displaying on my end here.

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

  17. kirtis_njones
    Member
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

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

  19. kirtis_njones
    Member
    Posted 2 years 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 2 years ago #

    screenshot of what i have on my end.

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

  21. kirtis_njones
    Member
    Posted 2 years 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 2 years 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 2 years ago #

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

  24. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  25. kirtis_njones
    Member
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

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

  30. kirtis_njones
    Member
    Posted 2 years 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. =)

Topic Closed

This topic has been closed to new replies.

About this Topic