How to make a Background video Header

johnebaker wrote on 4/9/2020, 9:21 AM

@KS-2300

Hi

While it is possible to do this, however it is not practical due to a browser compatibility issue

Firefox, Chrome, and Safari do not allow auto play of videos, the viewer has to click the play button to start it.

Microsoft Edge and Opera currently allow autoplay, however this may change to fall in line with the other browsers.

Internet Explorer 11 - obsolete but still in use by some viewers, may have issues as it does not fully support HTML 5

From your other post which I have closed - please do not post duplicate topics.

. . . . I've seen some websites have a Looping video play in the Header area . . . .

Can you provide a link to one of these websites.

HTH

John EB
Forum Moderator

KS-2300 wrote on 4/10/2020, 12:20 AM

Thanks John for your reply. Sorry about my double post.. I was looking for a way to delete it myself, thanks for doing that. Won't happen again.

A good example of background video playing in the Header can be found at:

https://y.co/

The background video plays in my browser when I have java enabled. As a browser I am using WaterFox Classic 2020, which is like Firefox 56.0 but with current security updates. WaterFox Classic allows me to use legacy add-on's that don't run in Firefox 58.0 or greater.

Thanks for your analysis it might not be practical considering the fact the majority of browsers don't allow for auto play video. However I'm not sure if a background video is considered an auto play video. Checking the y.co site on my phone, which has Firefox 68.3 the background header video actually played on my phone..

Though at first the header background video seemed impressive.. as a visitor I felt powerless to turn it off. Also It was a Big distraction after awhile. And though i use wifi to access the site on my phone.. some mobile visitors might not appreciate the wasted Data forced upon them.

In light of the compatibility issues you mentioned and out of respect for visitor's mobile data etc. Designing my landing page with a press-to-view video might be the best approach.

Thanks much for the perspective you offered.

P.S.
After receiving your reply, I happened to locate an article about adding a 'background' video. I assume that might be similar to background Header video. I'll provide that link too if you are interested. It's possible, but now might not be the best approach for a user friendly or first impression web site. As website design trends change, maybe Background Header Video's were cutting edge in their day.. but now a poor website design. Thanks again..

https://www.magix.info/us/support/article/adding-a-background-video--493/

johnebaker wrote on 4/10/2020, 12:40 PM

@KS-2300

Hi

Thanks for the link.

The home page video header did not play for me in Firefox until i had browsed to another page and then when I went back to the home page.

The header video in the example you gave is hosted on Vimeo and is embedded in the website.

. . . happened to locate an article about adding a 'background' video . . .

Thanks for the link, I had already tested creating a video header in a similar way, however getting it to autoplay was not possible in the 3 browsers I mentioned.

. . . . Designing my landing page with a press-to-view video might be the best approach. . . .

That is the most considerate option - I wish more website designers would do that, same applies to background 'music'.

John EB

KS-2300 wrote on 4/15/2020, 6:52 PM

Hi John.. Thanks for your follow up. Your input really was helpful. I'm new at website page designing and have to remind myself.. just because others do something.. doesn't mean I need to follow. My dilemma with page design has been.. Big Corporations have a certain look to them.. I can't explain it. A friend saw a different website I had made and said it didn't look professional.. He tried to talk me into using wix.com. But I like Xara Web Design too much.. and don't have time to learn a new page editor.. or use one that is totally accessed in the cloud. Maybe I should learn to incorporate xara templates better.? I use xara Headers but then simply add my content below the header. FYI the site I made with 'visitor choice' playing video is at: http://mytchips.com It still looks 'homemade' but in reality.. I'm just a small homemade designer. BTW I have some new problems or questions I'll be posting in new posts.. I'm sure we will meet again. :) Thanks again for your inputs, Take care... KS

johnebaker wrote on 4/16/2020, 4:07 AM

@KS-2300

Hi Kim

. . . . Big Corporations have a certain look to them.. I can't explain it. . . . .

It is called money - they spend huge quantities of hiring artistic/creative designers to get their 'look'.

A few tips:

Look at the templates in Web Designer there are some very professional looking ones.

Menus always at or near the top

Avoid coloured text and keep to simple clear fonts, never ever use Comic Sans or similar.

Keep the design uncluttered - less is more.

HTH

John EB

AAProds wrote on 4/28/2020, 7:54 AM

Out of interest, Kim, are the video players on this page http://mytchips.com/videos-mtc.htm from Xara Web Designer widgets?

KS-2300 wrote on 6/29/2020, 5:19 AM

Wow.. how time flies.. Sorry I haven't been back in awhile. I did OK through Covid lock down.. Hope everyone else managed OK also. Thanks JOHN for your helpful comments. Ouch.!!! your recommendation to avoid using Comic Sans.. my favorite goto font And avoiding Colored Font too. Those areas as well as not having the same budget as Big Corporate sites... that helped to explain the feeling I couldn't put my finger on exactly why other sites look so much different from mine. Yes many of the xara templates look quite nice. But I haven't learned how to write enough or the right amount to fill the template text areas or find appropriately related images to fit my needs. I hope you got your computer rebuilt and set up like you wanted. All the best.. BTW I have a new problem I'll be posting as a new subject. Hope to see you there. Stay well, stay safe..

KS-2300 wrote on 6/29/2020, 5:30 AM

Hi AAProds.. Sorry I didn't return sooner to answer your question. The video page you referenced I did Not use the xara Widget. For one reason or another I wasn't able to get the widget to work or I wanted to have some more control over configuring the player. I'm not an experienced programmer but I did manage to find and figure out how to install and set up a 3rd party player. For what it's worth.. the player I used is an open source HTML5 player framework. It's called videojs. You can google and find it or goto videojs.com. After some trial and error I got it to work.. and as you can see from that page.. I could easily add or arrange multiple videos. When setting up the HTML5 player i used the option where the framework is hosted on their site or partner for free and the video files are on my server. If I can help further let me know. Good luck to you.. Stay well and stay safe..