Help please with Background Video -...

Dec 4th, 2015 at 06:14 PM
User 2744602 Photo

bburgess
Registered User
162 posts

Thanks to Mansour for this handy bit of kit! :)

Mansour ... wrote:
For those whom like to video background to their website should check out http://coverr.co/ it’s full of royalty free videos sized at 5mb perfect for background video use.

there is how to use section here: http://coverr.co/#code


This works fine and is responsive if done by hand.
Pop it in to RSD and it is not working when it hits the oh 600px mark.
I assume it is something that RSD is doing when its being responsive? Or something I am missing

Demo here http://bpburgess.coffeecup.com

Thanks in advance,
KISS is the key!
Dec 4th, 2015 at 08:00 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,266 posts
Online Now

Can you share your project file?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Dec 5th, 2015 at 12:05 AM
User 2744602 Photo

bburgess
Registered User
162 posts

Ok here goes will see if it works this time :D

OM Gosh it worked first time ever :D
Attachments:
KISS is the key!
Dec 7th, 2015 at 06:43 AM
User 2744602 Photo

bburgess
Registered User
162 posts

BUMP Still need some help with why my code is playing up :(
KISS is the key!
Dec 8th, 2015 at 10:39 AM
User 283347 Photo

mark johnson
Registered User
388 posts

I'd like to get info on this, too. I have the same issues that he described
Dec 8th, 2015 at 11:53 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,266 posts
Online Now

Looks like a conflict in some css.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Dec 8th, 2015 at 12:02 PM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

I see the video here but only in Chrome. This is one of the pitfalls that I mentioned in another post. Using the video tag has downsides because not browsers support it and it all depends on the CODEC's installed if the video will play. This is why using a video hosting service (Youtube/Vimeo) is better because they have their own wrapper for the videos which does work in all browsers.

<div class="html-element"><div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://brettburgess.tk/video/Undo.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://brettburgess.tk/video/Undo.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
<img src="./images/Undo.jpg" alt="Picture of a hand typing at a computer screen">
</div>

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Dec 8th, 2015 at 12:08 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,266 posts
Online Now

I don't think this is the issue but.
https://validator.w3.org/nu/?doc=http%3 … cup.com%2F
Also who's video script are you using? That looks to be the culprit.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Dec 8th, 2015 at 07:02 PM
User 2744602 Photo

bburgess
Registered User
162 posts

Brett Burgess wrote:
Thanks to Mansour for this handy bit of kit! :)

Mansour ... wrote:
For those whom like to video background to their website should check out http://coverr.co/ it’s full of royalty free videos sized at 5mb perfect for background video use.

there is how to use section here: http://coverr.co/#code


This works fine and is responsive if done by hand.

Pop it in to RSD and it is not working when it hits the oh 600px mark.
I assume it is something that RSD is doing when its being responsive? Or something I am missing

Demo here http://bpburgess.coffeecup.com

Thanks in advance,


Hi Eric :) its in the post above mate. It works Fine when not using RSD.
KISS is the key!
Dec 8th, 2015 at 07:03 PM
User 2744602 Photo

bburgess
Registered User
162 posts

Scott Swedorski wrote:
I see the video here but only in Chrome. This is one of the pitfalls that I mentioned in another post. Using the video tag has downsides because not browsers support it and it all depends on the CODEC's installed if the video will play. This is why using a video hosting service (Youtube/Vimeo) is better because they have their own wrapper for the videos which does work in all browsers.

<div class="html-element"><div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://brettburgess.tk/video/Undo.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://brettburgess.tk/video/Undo.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
<img src="./images/Undo.jpg" alt="Picture of a hand typing at a computer screen">
</div>


Hi Scott that's correct that is why this line <img src="./images/Undo.jpg" alt="Picture of a hand typing at a computer screen"> is there it should show a picture if the video is not loading, I think :D
KISS is the key!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.