html5 background video in custom theme

  • Resolved kirtis_njones

    (@kirtis_njones)


    11 years, 4 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 - 16 through 30 (of 33 total)
  • Thread Starter kirtis_njones

    (@kirtis_njones)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter kirtis_njones

    (@kirtis_njones)

    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

    Thread Starter kirtis_njones

    (@kirtis_njones)

    screenshot of what i have on my end.

    View post on imgur.com

    Thread Starter kirtis_njones

    (@kirtis_njones)

    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="https://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>
    Thread Starter kirtis_njones

    (@kirtis_njones)

    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

    Thread Starter kirtis_njones

    (@kirtis_njones)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter kirtis_njones

    (@kirtis_njones)

    Ok…so….

    Fixed the issues where

    GET https://localhost/beerworld-growlers/wp-content/themes/beerworldlayout/style.css  nikijones.us/:8
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=3.7  nikijones.us/:11
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/captions.css?ver=3.7  nikijones.us/:12
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=3.7  nikijones.us/:15
GET https://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. -_-

    Thread Starter kirtis_njones

    (@kirtis_njones)

    Ok…so….

    Fixed the issues where

    GET https://localhost/beerworld-growlers/wp-content/themes/beerworldlayout/style.css  nikijones.us/:8
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/settings.css?ver=3.7  nikijones.us/:11
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/css/captions.css?ver=3.7  nikijones.us/:12
GET https://localhost/beerworld-growlers/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=3.7  nikijones.us/:15
GET https://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. -_-

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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?

    Thread Starter kirtis_njones

    (@kirtis_njones)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sure https://awesomescreenshot.com/0bc1vnag60 – The bubbles are animated

    Thread Starter kirtis_njones

    (@kirtis_njones)

    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. =)

    Thread Starter kirtis_njones

    (@kirtis_njones)

    just out of curiosity, mind telling me what browser/OS your running?

Viewing 15 replies - 16 through 30 (of 33 total)
  • The topic ‘html5 background video in custom theme’ is closed to new replies.