//About Section Content here //Small Background Section Content here

I used Font Awesome for the social icons that are in the section small-background-section. We will then add a template for our video using the plugin jQuery.mb.YTPlayer. Place the following code immediately after .

Here's what we used to set up 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- presence of sound
• startAt- the time from which you want 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. Let's install z-index on the 550 and parameter overflow on hidden. This is necessary to prevent YouTube content (subtitles, annotations) from being displayed on our website. The rest of the styles are 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 ) 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 set the parameter background color on 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:#ffff; background: #34495e; )

For the small-background-section, which also serves as a footer, we will assign a width of 100% and a parameter overflow on hidden. We will 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

In order for our site to be adaptive, 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 the jQuery code. Place the following code before the closing body tag and inside the tags .
$(function()( $(".player").mb_YTPlayer(); ));

Fallback

The background video from YouTube will not play on mobile devices and tablets, as YouTube rules do not allow it.

However, we can use jQuery to add a default background image if the browser detects that the user is visiting the site from a mobile device.

Manual solution

To determine if the user is logged in from a mobile or tablet device, we can hide the element at a specific screen size. For example, we want to remove the video background on screens that are 480px wide. 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 the variable is_mobile with the false parameter. Then make sure the class player has display: none. 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 used the methods device.mobile() And device.tablet() to check the device from which the user 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.

Putting in order

Video is an excellent way to deliver a message to an audience. It can be a powerful tool for your website if used correctly.

I am sure that as web design develops and improves, more and more creative ideas for using video in website design will emerge. I hope you have learned something in this tutorial. Write your thoughts and comments in the comments.

From a translator. With all the wishes and comments regarding the translation, please contact me in a personal. Thanks!

Sales Analytics

Integration with your PBX

Website integration

Connecting special widgets will relieve you of the need to manually transfer leads and contacts to the system! Create custom forms on your site. After filling them in by the client, the contact or deal will automatically enter the amoCRM system.

Application for iPhone or Android

The amoCRM apps for iPhone and Android have the ability to view a list of clients, leads, a list of tasks, and a feed of events.

Convenient desktop

amoCRM itself automatically displays all the most important charts, and if some data is missing in the basic package, you can always add an unlimited number of your widget panels.

Extensions and Widgets

Make working with amoCRM familiar and comfortable! Create your own email newsletters in just two clicks. Integrate amoCRM with telephony and save time for your specialists. Store your files in the convenient Dropbox cloud storage.

Database of clients, companies and deals

It contains all the information on each client, active negotiations, current contracts and future sales. Moreover, the program provides "smart" search, tags and filter. Each deal has a feed of events, which stores all the notes, offer files, and here you can set new tasks. The entire history of interactions with customers is in one place.

amoCRM helps you make sure every deal has an action scheduled and reminds you if a task is overdue or nothing is scheduled. Enter the deal, leave a note and add a task. Mission accomplished? Just cross it out. They are located in a special tab of the interface. Did you forget to call Sergei? Called? Right here we note that the task is completed.

Full integration with your mail

Connect an unlimited number of any mailboxes, and your correspondence will be automatically displayed in amoCRM. We will automatically create new deals for each new letter from the client. We will even track the processing speed of incoming requests.

Sales Analytics

amoCRM provides charts for the distribution of transactions by status, manager or in another section convenient for you. In addition, the system builds sales forecasts based on previously collected statistics and the current situation.

Integration with your PBX

AmoCRM will become your indispensable assistant in making and forwarding calls. With it, you can "remember" the names of all your customers. The program also stores all the statistics of your incoming and outgoing calls. After establishing a connection with your PBX, a special phone icon will appear in the amoCRM interface. One click and the number is automatically dialed on the manager's phone. You can call both from the lists and from the contact or deal card.

From the author: In this tutorial, we'll walk through a simple technique for creating a background image that will fully stretch to the full width of the browser's viewport. To do this, we need the background-size CSS property; JavaScript is not needed.

Examples of Responsive Entire Background Images

Nowadays, it has become quite popular to use a huge photo as a background that takes up the entire web page. Here are some examples of sites that have responsive full background images set:

If you would like to achieve a similar result in your next web project, then this article is for you.

Basic principles

Here is our action plan.

Use the background-size property to completely fill the viewport

The background-size CSS property is set to cover. The cover value tells the browser to automatically and proportionally scale the width and height of the background image so that they are always equal to or greater than the width/height of the viewport.

Use a media query to handle small mobile background images

To improve page loading speed on small screens, we'll use a media query to render a smaller version of our background image. It's not obligatory. This technique will work without it. But why is using a small mobile background image a good idea?

The image I used in the demo is 5500x3600px. This resolution is sufficient for most widescreen computer monitors currently on the market. But for this you have to process a 1.7MB file.

Such a huge additional load just for the sake of placing a background photo in any case will not bring anything good. And, of course, this will be extremely bad for connections using the mobile Internet. Also, this resolution is overkill for devices with a small screen (more on this later). Let's take a look at the whole process.

HTML

For markup, all you need is this:

We're going to assign a background image to the body element so that the image always takes up the entire viewport of the browser.

However, this technique will also work for any block-level element (such as a div or form). If your block element's width and height are "fluid" then the background image will always scale to fit the entire container.

css

Set the following styles for the body element:

body ( /* Path to the image */ background-image: url(images/background-photo.jpg); /* The background image is always centered vertically and horizontally */ background-position: center center; /* The background image is not repeated * / background-repeat: no-repeat; /* The background image is fixed in the viewport, so it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what allows the background image to adjust to the size of the container */ background-size: cover; /* Sets the background color to be displayed while the background image is loading */ background-color: #464646; )

body ( /* Path to image */ background-image : url (images / background-photo . jpg ) ; /* The background image is always centered vertically and horizontally */ /* The background image is not repeated */ background-repeat: no-repeat; /* The background image is fixed in the viewport so it doesn't move when the content height is greater than the image height */ /* This is what allows the background image to adjust to the size of the container */ background-size:cover; /* Sets the background color to be displayed while the background image is loading */ background-color : #464646;

The most important property/value pair to pay attention to is:

background-size: cover;

background-size:cover;

Here is where the magic begins. This property/value pair tells the browser to scale the background image proportionally, i.e. so that its width and height are equal to or greater than the width/height of the element (in our case, the body element).

However, this property/value pair has one problem: if the background image is smaller than the body element - which will happen on high resolution screens and/or when you have a huge amount of content on the page - the browser will inevitably zoom in. And, as we know, when we increase the dimensions of a bitmap, the quality of the image decreases (in other words, pixelation occurs).

Increasing the size of an image relative to its original dimensions affects the quality of the image. Keep this in mind when choosing the right image. The demo uses a huge 5500x3600px photo for widescreen monitors, so a very large screen would be required for quality distortion to occur. Let's move on. To ensure that the background image is always centered in the viewport, we write:

background-position: center center;

background - position : center center ;

This entry places the background on the coordinate axis in the center of the viewport. Next, we need to define what will happen when the height of the content exceeds the visible height of the viewport. When this happens, a scrollbar appears.

In this case, we need to make sure that the background image remains in its original position even when the user scrolls down the page. In this situation, the image will either simply end when scrolling, or it will move as the scroll progresses (which can be very distracting for the user). To fix the background, we set the background-attachment property to fixed.

background-attachment: fixed;

background-attachment: fixed;

In the demo, I've added the ability to "load content" so you can see what happens when a scroll bar appears in the browser when the background-attachment property is set to fixed. You can also download the demo and play around with element positioning properties (like background-attachment and background-position) to see how it affects page scrolling and the background image. The rest of the property values ​​are pretty self-explanatory on their own.

CSS shorthand

I have detailed the background properties to make them easier to explain. The abbreviation will also be equivalent:

body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )

body ( background : url (background - photo . jpg ) center center cover no - repeat fixed ;

All you have to do is change the url value to point to the path to your background image.

Optional: media query for small screens

For smaller screens, I used Photoshop to downsize the original background image proportionally to 768x505px, and I used Smush.it to downsize a bit more. This reduced the file size from 1741KB to 114KB. Those. image size reduced by 93%.

Please don't get me wrong, 114KB is still quite a lot for a purely aesthetic design element. Considering the additional 114KB load, I would only use such a file if I saw an opportunity to significantly improve the user experience (UX) of the site, because. at the moment, a significant proportion of Internet traffic is accounted for by mobile devices background-image: url (images / background-photo-mobile-devices. jpg) ;

The media query has a width limit of max-width: 767px, which means that if the browser's viewport is larger than 767px, then a large background image will be loaded.

The disadvantage of using this media query is that if you change the width of your browser window from, say, 1200px to 640px (or vice versa), you will immediately see when the small or large background image is loaded.

In addition, because some small screen devices can display more pixels—for example, the iPhone 5 with retina display can display 1136x640px resolution—the small background image will be pixelated.

Summarizing

You can view a more up-to-date version of the source code from this GitHub tutorial. I can only warn you about one thing: please use this technique with caution, because large files can seriously damage the UX, especially if the end user is using a slow and unreliable Internet connection. This is another reason why you should choose an appropriate background color so that the user can read the content while the background image is loading.

| 16.04.2015

Over the past year, web designers have increasingly begun to use an original way to spice up a site - installing a video as a page background. An interesting plot or just a “live” picture on the background will decorate even an ordinary business card site, interest the user and encourage them to stay longer on the site. Today we will share with you one of the ways to set a fullscreen video background for a website using HTML5 and CSS.

If you are firmly convinced that you want to set a video for the background on the site, you need to know some nuances:

1. First, you must remember that the video has a fairly large weight. This can negatively affect page loading speed, especially if the user has a slow Internet connection. Therefore, choose videos that are not too long in time. In the case where you need to use a rather long video, be prepared to either work on reducing its weight, or that you have to sacrifice part of the audience.
2. Secondly, avoid auto-play audio from videos. Use either videos without audio, or add the ability for the user to turn on the sound himself if he needs it. Automatically playing a sound when opening a site is considered very bad form.
3. 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 (in cases where it does not play). We will show how to do this in our example below.
4. And fourthly, you should think 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 undertaking. In no case should the video distract the user from his main goal, due to which he came to the site. When setting a video background below text content, don't forget to check how readable the text is. For example, it may fade into the background at a certain point in the video playback (white text on white background, black text on black, etc.).

1.HTML

For our example, we took a video with a resolution of 1920 × 1080, a duration of 15 seconds and a weight of just over 3 MB. Inside the block