video background

neldevoghel
20 Posts
neldevoghel posted this 08 February 2016

Is it possible to use video instead of a picture on the background of a header section? How can it be done?

Is it possible to use video instead of a picture on the background of a header section? How can it be done?
Vote to pay developers attention to this features or issue.
19 Comments
Order By: Standard | Newest
Stagger Lee
1841 Posts
Stagger Lee posted this 08 February 2016

Insert video control or upload video to own server and use standard HTML embed code.

Insert video control or upload video to own server and use standard HTML embed code.
neldevoghel
20 Posts
neldevoghel posted this 08 February 2016

Wait, I have a section with a container and a slider. That slider contains one slide with a picture, but I want a video instead of that picture. I can put a video above or under that section, but not insde that section

Wait, I have a section with a container and a slider. That slider contains one slide with a picture, but I want a video instead of that picture. I can put a video above or under that section, but not insde that section
Stagger Lee
1841 Posts
Stagger Lee posted this 08 February 2016

  • Remove photo from slider
  • Insert one new container control (inside slider)
  • Insert video control inside container (inside container inside slider)
  • It is all, put link to your video

- Remove photo from slider - Insert one new container control (inside slider) - Insert video control inside container (inside container inside slider) - It is all, put link to your video

Last edited 08 February 2016 by Stagger Lee

neldevoghel
20 Posts
neldevoghel posted this 09 February 2016

Thanx Stagger Lee. I think I have the video in the right position now but it's not covering the full background. Is it possible that the video takes the height of your screen?

Thanx Stagger Lee. I think I have the video in the right position now but it's not covering the full background. Is it possible that the video takes the height of your screen?
Support Team
Support Team posted this 09 February 2016

Hi,

You mean to make it a background in the site? In this case you can try to put the container with absolute position on the top of the page and set the 100% width and height. maybe you will need to play around those options a bit.

Sincerely,
Hella

Hi, You mean to make it a background in the site? In this case you can try to put the container with absolute position on the top of the page and set the 100% width and height. maybe you will need to play around those options a bit. Sincerely, Hella
neldevoghel
20 Posts
neldevoghel posted this 09 February 2016

Now I have something like this. My sliders height is 100vh.

Now I have something like this. My sliders height is 100vh.
Support Team
Support Team posted this 09 February 2016

Hi,

The container is full height, but the video in the container maybe 100% in width and the height is calculated to keep the video proportions and that's why it does not go down. You can attach your theme so we could check.

Sincerely,
Hella

Hi, The container is full height, but the video in the container maybe 100% in width and the height is calculated to keep the video proportions and that's why it does not go down. You can attach your theme so we could check. Sincerely, Hella
neldevoghel
20 Posts
neldevoghel posted this 09 February 2016

Hi, I want something like http://www.palmercreative.co.uk/ but with full screen video. Just like your fantastic full screen header sections but with video as background instead of a picture.

Hi, I want something like http://www.palmercreative.co.uk/ but with full screen video. Just like your fantastic full screen header sections but with video as background instead of a picture.
neldevoghel
20 Posts
Is Solution
neldevoghel posted this 09 February 2016

Hello, I can make this work with the free PRI-background module. For the people who work with Joomla
http://extensions.joomla.org/extension/pri-background
I insert one of themlers great headersections with menu. I delete all but one slide. I remove the picture in that one slide.
In themler I create an empty module position (you can also use an existing module position on the page) because the module needs an existing moduleposition.
In the backend of joomla go to the PRI-backgroundmodule and insert #section3 (or the id of your headersection) in the Background Selector input field. Choose a video (Vimeo, Youtube) Settings: Loop True / Position Absolute / Fullscreen bg True

I should be great to have this function in Themler itselfs

Hello, I can make this work with the free PRI-background module. For the people who work with Joomla http://extensions.joomla.org/extension/pri-background I insert one of themlers great headersections with menu. I delete all but one slide. I remove the picture in that one slide. In themler I create an empty module position (you can also use an existing module position on the page) because the module needs an existing moduleposition. In the backend of joomla go to the PRI-backgroundmodule and insert #section3 (or the id of your headersection) in the Background Selector input field. Choose a video (Vimeo, Youtube) Settings: Loop True / Position Absolute / Fullscreen bg True I should be great to have this function in Themler itselfs
neldevoghel
20 Posts
neldevoghel posted this 09 February 2016

You can see a demo here:

http://www.degevestigdewaarden.be/

... and sorry for my bad English

Greetz
Nel

You can see a demo here: http://www.degevestigdewaarden.be/ ... and sorry for my bad English Greetz Nel
Stagger Lee
1841 Posts
Stagger Lee posted this 09 February 2016

Use one of finished header sections (without carousel slider) and adapt it.

  • Remove photo
  • Insert layout container in section
  • 100% height, 100% width, set position relative, not absolute, remove all values from top, left, right, bottom
  • Inside this container insert video control

Use one of finished header sections (without carousel slider) and adapt it. - Remove photo - Insert layout container in section - 100% height, 100% width, set position relative, not absolute, remove all values from top, left, right, bottom - Inside this container insert video control

Last edited 09 February 2016 by Stagger Lee

Stagger Lee
1841 Posts
Stagger Lee posted this 09 February 2016

You dont need slider if it is only one video. Forget sliders.
If it is video from Youtube there are other problems. You cannot force HD preview image, cannot force HD playback.

You dont need slider if it is only one video. Forget sliders. If it is video from Youtube there are other problems. You cannot force HD preview image, cannot force HD playback.

Last edited 09 February 2016 by Stagger Lee

neldevoghel
20 Posts
neldevoghel posted this 09 February 2016

I've tried it, started from a blank section, inserted a layout container, inserted a video. Works, but I have troubles to insert another container in that same section, a container that contains the menu and the text as a layer over the video. Drag and drop, it's horrible!! Or it's under or behind the video.
I mean, as video it works fine, but it's no background video. I need text and controls as a layer over the video. Or do I something wrong?

Another problem: you still see the controls of the video even I've turned it off.

I think I'll use the PRI-backgroundmodule for the moment. It works fine with it.

A good (video)tutorial on this subject?

I've tried it, started from a blank section, inserted a layout container, inserted a video. Works, but I have troubles to insert another container in that same section, a container that contains the menu and the text as a layer over the video. Drag and drop, it's horrible!! Or it's under or behind the video. I mean, as video it works fine, but it's no background video. I need text and controls as a layer over the video. Or do I something wrong? Another problem: you still see the controls of the video even I've turned it off. I think I'll use the PRI-backgroundmodule for the moment. It works fine with it. A good (video)tutorial on this subject?

Last edited 09 February 2016 by neldevoghel

Stagger Lee
1841 Posts
Stagger Lee posted this 09 February 2016

z-index:1 to all containers visible above video.

z-index:1 to all containers visible above video.
Rail Ilyasov
10 Posts
Rail Ilyasov posted this 30 May 2017

cutevamp911, On your website video plays continuously, without delays between replays. I got 15 seconds of video play, 1 - 3 seconds loaded (while loading the video gray background), and again play. And so the circle. How did you do it? Your video do not pause and not load between replays.

cutevamp911, On your website video plays continuously, without delays between replays. I got 15 seconds of video play, 1 - 3 seconds loaded (while loading the video gray background), and again play. And so the circle. How did you do it? Your video do not pause and not load between replays.
fgl_aj
9 Posts
fgl_aj posted this 19 June 2017

hi can someone please share their trick to make these work? thanks

hi can someone please share their trick to make these work? thanks
fgl_aj
9 Posts
fgl_aj posted this 19 June 2017

I'm using youtube video background on my website: http://cutevamp.com and website designed by using themler for wordpress.

Hi can you please share your method? Thanks

> I'm using youtube video background on my website: http://cutevamp.com and website designed by using themler for wordpress. > > Hi can you please share your method? Thanks
raffe
39 Posts
raffe posted this 04 October 2017

Hello all,
I have a question,
I put the video into the slider and I'm looking for a solution for two points:
1. The video does not display across the width of the screen
2. Texture is not on the video (just like it is on the website: http://cutevamp.com), the video is in the container

request for help

Hello all, I have a question, I put the video into the slider and I'm looking for a solution for two points: 1. The video does not display across the width of the screen 2. Texture is not on the video (just like it is on the website: http://cutevamp.com), the video is in the container request for help
Support Team
Support Team posted this 04 October 2017

Hi,

Please attach your theme exported with the editor included.

Sincerely,
Hella

Hi, Please attach your theme exported with the editor included. Sincerely, Hella
You must log in or register to leave comments