| 16.04.2015
Over the past year, web designers have increasingly embraced an ingenious way to liven up a website - setting a video as the background of the page. An interesting plot or just a "live" picture in the background will decorate even a regular business card site, will interest the user and encourage you to stay on the site longer. Today we are going to share with you one of the ways to set a full screen video background for your website using HTML5 and CSS.
If you are firmly convinced that you want to set a video for the background on the site, there are some nuances to be aware of:
- First, be sure to remember that the video has a lot of weight. This can negatively affect the page load speed, especially if the user has a slow Internet connection. Therefore, choose short videos. In the case when you need to use a rather long video, be prepared either to work on reducing its weight, or to the fact that you will have to sacrifice part of the audience.
- Secondly, avoid autoplaying audio from video. Use either videos without audio, or add the ability for the user to turn on the sound himself if he needs it. It is considered very bad form to automatically play a sound when you open a site.
- Thirdly, you need to take care of cross-browser compatibility and correct display and playback of video on all devices, as well as provide an alternative to the video (for those cases if it will not play). Below in our example, we will show you how to do this.
- And fourthly, it is worth thinking carefully about whether a videophone is appropriate on the site where you want to install it, since it is very easy to cross the line between originality and uselessness of this venture. The video should in no way distract the user from his main goal, for which reason he came to the site. When setting a video background below text content, be sure to check how readable the text has become. For example, it can merge with the background at a certain point in the video playback (white text on a white background, black on black, etc.).
1. HTML
For our example, we took a video with a resolution of 1920 × 1080, 15 seconds in length and weighing a little over 3 MB. Inside the block
For tag
- width - the width of the area for playing the video;
- height - the height of the area;
- autoplay - automatic video playback;
- loop - looping video;
- poster - an image that is displayed instead of a video while it is loading or unavailable.
Next, we have written two tags
2. CSS
Our background stylesheet looks like this:
# video-bg (position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; background: url (bg / daisy-stock-poster.jpg) no -repeat # 94a233; background-size: cover;) # video-bg> video (position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height : auto;) @supports (object-fit: cover) (# video-bg> video (top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;))
As you can see from the code, the background is set to the entire page, and an image (a frame from the same video) is set as a fallback background. As a last resort, the background color # 94a233 will be used.
The code also contains the @supports directive, which checks if the browser supports the object-fit property. If so, the background is set to cover and is proportionally displayed at different screen sizes.
According to caniuse.com, the object-fit property is currently supported by all browsers except Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1, and Android Browser 4.1-4.4.
Large videos in the background of websites are a pretty popular trend in web design. Cleverly applied videos can make a website more dramatic and engaging to users.
In addition, video backgrounds can be played smoothly and without "brakes", unlike backgrounds created with JavaScript, which require loading certain code and images before the user sees the result of the animation.
There are companies like Powerhouse or Adidas that use video as the background of a website to convey a specific message or story about a product or service to the user.
Although the most popular way to create a video background is using HTML5 video tag along with some CSS parameters, you should also pay attention to alternative video sources, for example, YouTube. In this case, you do not have to worry about the slow server response, because the request will be sent directly to YouTube.
In this article, I'll show you how you can build a cool website that uses YouTube videos as a background. We will be using jQuery.mb.YTPlayer.js to edit and control the look of our video. So let's get started!
Download sources
Demo
You will need:
// Big Background Content here
Now you need to fill each section with content. In the big-background and small-background-section, place the class pattern, to create a light texture in our video. You also need to add h1, h2, paragraph and button.
YOUTUBE
BACKGROUND VIDEO
I want to learn thisPut any YouTube video in the background of the site
Wondering how to add video to the background of your website?
It's as easy as shelling pears! With jQuery MB.YTPlayer, a jQuery plugin, you can embed any YouTube video into the background of your site.
You can easily turn any video into an HTML background. No delays in page load and server load!
We are from social networks
I used the font Font Awesome for the social icons, which are located in the section small-background-section... Then we will add a template for our video using the plugin jQuery.mb.YTPlayer. Place the following code right after .
Here's what we used to customize the video:
- class player- this class is used by the plugin mb.YTPlayer
- videoURL- link to video
- containment- CSS selector in which to play the video
- autoPlay- auto-play video
- mute- the presence of sound
- startAt- the time from which to start playing the video
- opacity- video transparency
CSS
Let's add styles to our site. First of all, let's define the appearance of the html, body, paragraph tags and bulleted list.Html (height: 100%) body (font: 15px / 23px "Raleway", sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; -webkit-font-smoothing: antialiased; - webkit-text-size-adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; list-style: none; padding-right : 10px;)
Wrapper (z-index: 600; position: relative) .pattern (background-image: url (../ images / pattern.png); background-repeat: repeat; background-attachment: scroll; width: 100%; height: 100%; position: absolute; top: 0; left: 0) .divider (background-image: url (../ images / divider.png); display: block; width: 300px; height: 35px; margin: 10px auto ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)
It's time to style the big-background section. Install z-index on 550 and parameter overflow to hidden. This is to prevent YouTube content (subtitles, annotations) from being displayed on our website. The rest of the styles are needed for the headers, buttons, and the default image (more on that later).
Big-background (z-index: 550; text-align: center; height: 100%; min-height: 100%; position: relative; overflow: hidden) .big-background .big-background-container (width: 830px ; max-width: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate (-50%, - 50%); -moz-transform: translate (-50%, - 50%); -ms-transform: translate (-50%, - 50%); -o-transform: translate (-50%, - 50%); transform: translate (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: uppercase; text-align : center; margin-bottom: 22px; padding-top: 20px; display: inline-block; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: uppercase; text-decoration: none; color: #fff; background: transparent; border: 2px solid #fff; padding: 10px 14px ; cursor: pointer; letter-spacing: 2px; text-align: center; display: inline-block; -webkit-transition: .4s background ease; -moz-transition: .4s background ease; -o-transition: .4s background ease; transition: .4s background ease; ) .big-background-btn: hover (color: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : no-repeat; background-position: center center; background-size: cover; width: 100%; height: 100%; z-index: 0; backface-visibility: hidden)
Now let's move on to the section about-section... Let's configure the parameter background-color to white and padding 60px top and bottom and 20px left and right.
About-section (font-family: "Lato", sans-serif; color: # 7f8c8d; background: #fff; padding: 60px 20px) .about-section-container (text-align: center; padding-bottom: 50px) .about-section-title (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; background-attachment: scroll; background-repeat: repeat-x; background-position: center center; text-transform: uppercase) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; text -transform: uppercase; text-decoration: none; color: # 34495e; background: transparent; border: 2px solid # 34495e; padding: 10px 14px; cursor: pointer; letter-spacing: 2px; text-align: center; display: inline-block; -webkit-transition: .4s background ease; -moz-transition: .4s background ease; -o-transition: .4s background ease; transition: .4s background ease;) .about-section-btn: hover (color: #fff; background: # 34495e;)
For the small-background-section, which also serves as a footer, we'll assign a width of 100% and a parameter overflow to hidden. We'll also add some padding top and bottom so that our video can be seen. Finally, let's add styles for the social media buttons.
Small-background-section (font-family: "Raleway", sans-serif; padding: 100px 0; position: relative; width: 100%; overflow: hidden) .small-background-container (position: relative; text-align : center) .small-background-title (font-size: 40px; color: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: uppercase; margin-bottom: 20px ; margin-top: 20px; position: relative; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) .socials a (color: #fff) .socials a: hover (color: # bdc3c7)
Media queries
To make our site responsive, let's add some media queries.@media screen and (max-width: 768px) (.about-section-title (line-height: 1)) @media screen and (max-width: 480px) (.big-background-title (font-size: 58px ) .small-background-title (line-height: 1) / *. player (display: none;) -> If you want to remove the video bg on a specific viewport w / o plugin * /) @media screen and ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))
jQuery
Now let's turn on our YouTube video. Let's call the class player inside jQuery code. Place the following code before the closing body tag and inside the tags .$ (function () ($ (". player"). mb_YTPlayer ();));
Fallback option
Background videos from YouTube will not play on mobile devices or tablets as YouTube policies do not allow it.However, we can use jQuery to add a default background image in case the browser detects that the user has entered the site from a mobile device.
Manual solution
To determine that the user is logged in from a mobile device or tablet, we can hide the element on a specific screen size. For example, we want to remove the video background on 480px wide screens. You just need to add display: none to the player element:
@media screen and (max-width: 480px) (.player (display: none;))
As far as jQuery is concerned, here we will set a variable is_mobile with the parameter false. Then, make sure that the class player has display: none parameters. If so, then add the class big-background-default-image to sections big-background and small-background-section to use the default background image. Otherwise, nothing will change.
(function ($) ($ (document) .ready (function () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Conditional script here $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". player "). mb_YTPlayer ();)));)) (jQuery);
Solution with jQuery plugin
Another way to set the default image is with the jQuery plugin device.js(http://matthewhudson.me/projects/device.js/). This will simplify the process of describing conditions for different screen sizes of mobile devices. Using this plugin, we can simply write the following code:(function ($) ($ (document) .ready (function () (//Device.js will check if it is Tablet or Mobile - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery will add the default background to the preferred class $ (". big-background, .small- background-section "). addClass (" big-background-default-image ");)));)) (jQuery);
Here I have used the methods device.mobile () and device.tablet () to check the device from which the user is logged in. If the condition is met that the class is added big-background-default-image to section big-background and small-background-section... Otherwise the class player will remain unchanged and the video will play.
We put in order
Videos are a great way to get your message across to your audience. It can be a powerful tool for your site if used correctly.I am sure that as web design develops and improves, there will be more and more creative ideas for using video in website design. I hope you learned a thing or two in this tutorial. Write your thoughts and comments in the comments.
From a translator. With all wishes and comments regarding the translation, please contact me in a personal. Thanks!
How to install a site on a desktop monitor?
Probably the first thing that any user gets tired of is looking at the wallpaper that is installed on the Desktop. Many people constantly look at the default picture for years, even if the system has been reinstalled more than once. All users quickly get bored with it, and they are looking for suitable pictures for the Desktop. Some users prefer animated wallpapers. I suggest you set the home page of your favorite site as wallpaper (however, any page, of course). Now, in the days of unlimited Internet, this is sometimes very, very convenient for some, especially when a computer or laptop is constantly connected to the network. In any case, it's a good option. This trick appeared in Windows XP. Alas, it ended there. Interactive tables are gone. It was very interesting for me personally to watch the updates of news sites on-line. Such a desktop setup would be useful to many users. But, again, the creators of new versions of Windows decided to leave the Desktop without the ability to reflect an interactive page. Honestly, very, very sorry. Personally, I sometimes really miss such an opportunity.
But let's move from words to deeds. Installing the web page on the desktop
- Right-click on any of the free space on the Desktop
- On the additional menu that appears on the Desktop, select the item Properties.
- Let's select the Desktop tab and click Desktop customization ...
- In the Desktop Elements menu, now select the tab Web and then click on the button Create... Well, or choose an item My current home page. The background will display the site page, which is set as the home page in the default browser.
In the window that appears, just enter the previously copied address of your favorite site from the address bar of your browser.
Close successively opened dialog boxes, agreeing to the changes and clicking OK. Now, instead of a boring picture, you have a page of the website you like and, looking at the site on the Desktop, you can watch the changes on the network in an interactive mode.
