Using video background elements -...

Jun 6th, 2017 at 12:04 PM
User 2846109 Photo

Jeff
Ambassador
341 posts

Has anyone implemented a video background element such as the videos on http://www.coverr.co

I'm having trouble getting it to display properly when I use the provided code when you download one of the videos. I know it's not as simple as just pasting in the code as some of it will be in different spots when using RSD but I'm not sure what code to eliminate and what to keep.

When you download (it's free) a video element you get html/css/js code to use.

Ideally I'd like to have a container get filled with the video element and I'd like to be able to adjust the size and styling of the container inside RSD.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Jun 6th, 2017 at 04:05 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,399 posts
Online Now

I used the ones from Coffee Cup,, easy,,, then put your video up to vimo and away yo go

check it out on my web-site see it in action
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Jun 6th, 2017 at 04:55 PM
User 2839879 Photo

Bainn
Registered User
99 posts

See: http://www.championfreight.co.nz
See: http://www.championfreight.co.nz/freight
See: http://www.championfreight.co.nz/resources

Html (inside html element):
<video id="bgvid" autoplay loop muted preload poster="http://www.championfreight.co.nz/uploads/ship_01_2000.jpg">
<source src="video/container_ship_01.webm" type="video/webm" />
<source src="video/container_ship_01.mp4" type='video/mp4' />
</video>


Note: Make sure you set the html element to z-index -200, so it sits nicely at the back.

CSS:
#bgvid {
position:absolute;
bottom: 0%;
left: 50%;
min-width: 100%;
min-height: 100vh;
width: auto;
height: auto;
-ms-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
@media screen and (max-width: 93.75em) {
/* Rules when screen resolution is less than 1500px */
#bgvid {
position:absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
}
}


A couple of more tips:
1. This code is based on hosting your own video. There can be SEO benefits doing this, especially if the file is nice and compressed (I like to keep it under 6,500 KB). For this reason, my background videos usually loop under 20 seconds, otherwise they can be too big.
2. I use Handbrake (free software) to condense my video files while retaining image quality. Search the web to download and view tutorials.
3. I usually don't have my videos playing for mobile devices.

Hope this helps.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
Jun 6th, 2017 at 05:48 PM
User 2846109 Photo

Jeff
Ambassador
341 posts

Thanks guys! I'll look into both methods and get back to you!

Jeff
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Jun 6th, 2017 at 07:32 PM
User 2846109 Photo

Jeff
Ambassador
341 posts

So I'm going to try to get the CC video element working first.

Wayan:
are you just using the standard video element?
are you putting it into a container or just directly into a column?
what is controlling the size of the video? the container it is in or some other settings?
are you using a standard url for the video? such as: https://vimeo.com/214185128
or are you using other url info?
how do you get it so all of the video controls don't appear when you hover over the video?
any settings to get it to loop?

thanks!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Jun 6th, 2017 at 07:36 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,399 posts
Online Now

Jeff wrote:
So I'm going to try to get the CC video element working first.

Wayan:
are you just using the standard video element?
are you putting it into a container or just directly into a column?
what is controlling the size of the video? the container it is in or some other settings?
are you using a standard url for the video? such as: https://vimeo.com/214185128
or are you using other url info?
how do you get it so all of the video controls don't appear when you hover over the video?
any settings to get it to loop?

thanks!

i just put in the component
from within rsd everythibg is taken care of within that

I still use the video that came with it as I haven't found one that I like yet,
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Jun 6th, 2017 at 07:44 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,399 posts
Online Now

Jeff wrote:
So I'm going to try to get the CC video element working first.

Wayan:
are you just using the standard video element?
are you putting it into a container or just directly into a column?
what is controlling the size of the video? the container it is in or some other settings?
are you using a standard url for the video? such as: https://vimeo.com/214185128
or are you using other url info?
how do you get it so all of the video controls don't appear when you hover over the video?
any settings to get it to loop?

thanks!


B***G** me it seems that the background video components have disappeared from the components library
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Jun 6th, 2017 at 07:53 PM
User 2699991 Photo

Its A Kind Of Bali Magic
Registered User
5,399 posts
Online Now

Wayan Jaya wrote:
Jeff wrote:
So I'm going to try to get the CC video element working first.

Wayan:
are you just using the standard video element?
are you putting it into a container or just directly into a column?
what is controlling the size of the video? the container it is in or some other settings?
are you using a standard url for the video? such as: https://vimeo.com/214185128
or are you using other url info?
how do you get it so all of the video controls don't appear when you hover over the video?
any settings to get it to loop?

thanks!


B***G** me it seems that the background video components have disappeared from the components library


Just restarted RSD and they are back,,, strange
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
Jun 6th, 2017 at 07:59 PM
User 2846109 Photo

Jeff
Ambassador
341 posts

Ah, I didn't see they had video components... I'm looking them over now!
Cheers!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Jun 6th, 2017 at 08:28 PM
User 2846109 Photo

Jeff
Ambassador
341 posts

Bainn,
Thanks for the info! I'll be testing out that method tomorrow!
Are you keeping that extra CSS in a separate file that you load in as a resource into the head section?

I have Handbrake here already and I'll look into using it as needed to get the video formats correct.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

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.