MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

How to make videos into web background

Source: Shangpin China | Type: website encyclopedia | Time: 2015-05-31
It is cool to use video as the background of a web page, but it is also difficult. The background image attribute in CSS can only use image, SVG, color or gradient. But from Website production Technically, we can forge an effect that makes the video appear behind other HTML elements as background characters. The difficulty is that the video should fill the entire browser page and respond to changes in the size of the browser window.
 
Watch demo 1

Limitations of video as web background

Before implementing hands-on coding, we should first consider some problems of video as the background of web pages:

■ It is not because it is technically feasible that you can use it at will: the video content used as the background must enhance the appeal of the page content, not because it is beautiful or technically cool.
■ The background video should be set to play automatically, and the sound should be turned off by default; In fact, it's better to have no sound in the video. (You can place a button on the page to control the sound.)
■ The background video should have an alternative picture. When the browser does not support this HTML5 technology and video format, the picture should be used instead. The background image should also be used as a placeholder while waiting for the background video to load. For some mobile devices that do not support automatic video playback, pictures should also be used instead.
■ The length of the video is very important: if it is too short, it will obviously feel repeated play (the background video is usually repeated play). If it is too long, it will become a plot narrative. If so, this video should be played on the page separately. I suggest that the length of the video should be between 12-30 seconds.
■ Bandwidth is a big problem. The volume of video should be very small and compressed as much as possible. At the same time, it needs to automatically adapt to the screen size on different size devices. If possible, you should use JavaScript control to load background videos of different resolutions for different screen sizes. The background video should be less than 5M. If you are less than 500K, it is better.

We should be aware of the above situations. Let's take a look at the details of the technical implementation.

CSS code
Use the code method of playing video in HTML5 Video:

Note: The sequence of video formats is very important, because in some versions of Google Chrome, if the. webm format video is placed behind other videos, the video will not play.

We use the first frame of the video as the cover image of the video, so that once the background video is loaded, we can see a smooth transition from the picture to the background video.

How to expand video to full screen:
video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto; z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

Some older browsers can't play videos in this format, but they still recognize
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]