0

So i spent the entire day yesterday trying to achieve a full width responsive background video inside of a custom wordpress page template.

This is the bg-video code added to landing.php (my future landing page)

<div class="fullscreen-bg">
<video loop muted autoplay poster="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.gif" class="fullscreen-bg__video">
    <source src="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.webm" type="video/webm">
    <source src="public_html/wp-content/themes/gt3-wp-pure/page-templates/landingvid.mp4" type="video/mp4">
</video>

I have also included

<base href="http://angeloconstantinou.com/" />

This is the Themes.CSS dealing with the video:

.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}

.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}

@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
  width: 300%;
left: -100%;
}
}

@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}

.fullscreen-bg__video {
display: none;
}
}

Below is a screenshot of the error messages telling me the file couldn't be located. If i follow the exact path it is trying to pull the files from, I can see the files sitting there. (picture 2)

404 error message enter image description here

Things I have tried so far:

  • Moving landing.php out of a page-templates folder
  • Moving source files into every other possible directory
  • Using base URL re-write to stop Wordpress searching within a blog post ( i think i've got that right)
  • Writing full route url instead of source src='landingvid.mp4'

I am not an expert with any of this and chances are I'm asking the wrong questions. Hopefully with all of the screenshots and snippets someone will be able to help.

the website & page in question is www.angeloconstantinou.com/landing.php - when i have this working I will set this as my static front page, with a button that leads to the usual front page / portfolio menu of the website.

  • Your paths should be /wp-content/themes/gt3-wp-pure/page-templates/ instead of public_html/wp-content/themes/gt3-wp-pure/page-templates/ – TheDeadMedic May 11 '16 at 19:35
  • Thanks TheDeadMedic, I have deleted the other post and your fix is spot on. I can't up vote an answer for you as this is a comment. But this has answered everything. – Angelo May 11 '16 at 19:43
  • Appreciate the cleanup. No worries, I can post it as an answer but you'll have to wait to mark it accepted. – TheDeadMedic May 11 '16 at 19:44
  • Is there a specific reason why you're using two <source> tags and download 2 videos? MP4 is supported in all browsers.. – N00b May 11 '16 at 19:45
  • If i'm honest, i've put this code together, by trawling through tutorials and various other forums. This was recommended for compatibility. If this isn't the case i guess removing the second source will only speed things up. (initially the tutorial called for three sources?) – Angelo May 11 '16 at 19:47
0

Your paths should be:

/wp-content/themes/gt3-wp-pure/page-templates/

... instead of:

public_html/wp-content/themes/gt3-wp-pure/page-templates/
| improve this answer | |
0
<source src="<?php bloginfo('stylesheet_directory'); ?>/page-templates/yourfile.pdf" type="text/pdf" />

The bloginfo('stylesheet_directory') function will send you to your preset theme folder where all your files are... It's a best practice in linking your files from your theme directory folder...

Be aware that scripts( jQuery, jQUI, etc) should be linked in functions.php using wp_enqueue_script() function...

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.