Help please with Background Video -...

User 2744602 Photo


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!
Burgess Freelance Solutions
User 187934 Photo


Senior Advisor
18,749 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
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
User 2744602 Photo


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!
Burgess Freelance Solutions
User 2744602 Photo


Registered User
162 posts

BUMP Still need some help with why my code is playing up :(
KISS is the key!
Burgess Freelance Solutions
User 283347 Photo


Registered User
340 posts

I'd like to get info on this, too. I have the same issues that he described
User 187934 Photo


Senior Advisor
18,749 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
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
User 103173 Photo


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.
User 187934 Photo


Senior Advisor
18,749 posts

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
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
User 2744602 Photo


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!
Burgess Freelance Solutions
User 2744602 Photo


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!
Burgess Freelance Solutions

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.