Web design trend: how to use a video as the background?

♠ Posted by Unknown in web design & optimization at 08:19

One of the web design trends that appeals most surfers in 2015 is that of the great videos in the background. We have mentioned several times the impact of a nice background image we let you guess the benefits of a good quality video.
This concept allows to make your site more dynamic visually and generate a stronger interest among your visitors at first glance. As you know, it's easy to create your own website . However, this manipulation may seem slightly more complex than a simple change of color or background. And indeed, it requires a little more work. But fear not: you do not have to be the new Spielberg to get there. You simply perform some manipulations below.
But first, an example of a site created to prove that when we tell you that this trend is worth seeing, not the blank:

Embed a video in the background: the tutorial:
Generate an HTML  Click Here!

                                       Simply import your video to an online platform to get the HTML. For example, we will import our clip on the video sharing platform most famous: YouTube.
Make your video: it is better to create a short video that shows how to use your product while conveying the values of your company. You can also create a series of short clips that you mount loop as in the previous site.

 Danger! Attention to creating a video without sound - unless your business is in the field of music. Otherwise, your site will look like a jukebox.

Import it on YouTube: you will find a detailed tutorial

Copy the HTML code of the video: below the video on YouTube, click 'Share', 'Integrate' and copy the code that appears in sharing field.

Change the code to suit your needs:

This step is the most complicated but  it is easy for you with respect to you stage of all the tutorial, so hold on tight to your keyboard.
Before you start: Make sure to use the quotes "" not them "". Also note that the use of bold in the example only serves to enhance the various amendments. It is best to change the code directly in the YouTube code to prevent this type of error.
Take the example of a random video that HTML is: <iframe width = "560" height = "315" src = "// www.youtube.com/embed/_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
Each video receives an ID on YouTube. This sequence of letters and numbers is his ID on the network. In our example, this is scary _7lVtsuWaXw contained in the code of the video.
Here are 3 simple changes you need to make to the code:
V Enter instead of embed
Before: <iframe width = "560" height = "315" src = "// www.youtube.com/embed/_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
After: <iframe width = "560" height = "315" src = "// www.youtube.com/v/_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
Enter 100% instead of the figures appearing in width (width) and height (height)
Before: <iframe width = "560" height = "315" src = "// www.youtube.com/v/_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
After: <iframe width = "100%" height = "100%" src = "// www.youtube.com/v/_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
Then, insert after your video ID the following characters:
& autoplay = 1 & loop = 1 & controls = 0 & playlist = the IDdevotrevidéo "(here _7lVtsuWaXw) So in our example: & autoplay = 1 & loop = 1 & controls = 0 & playlist = _7lVtsuWaXw"
Little explanation: & autoplay = 1 allows you to make video fires automatically. & loop = 1 will move the loop. & controls = 0 removes the play, pause etc. for your video to be purged of control buttons. So the final code for our example would be:
<iframe width = "100%" height = "100%" src = "// www.youtube.com/v/_7lVtsuWaXw&autoplay=1&loop=1&controls=0&playlist=_7lVtsuWaXw" frameborder = "0" allowfullscreen> </ iframe>
Here is your HTML code is ready to be integrated on your site!

 Embed your video on your website:

• Now go to the editor, click Add, Apps, HTML and select HTML code.

• Copy your code in the HTML / Embed Code field.

• Click Update.

• Size your video by dragging the box in the proportions that suit.

Most importantly, do not forget to customize the mobile version of your site by hiding this element. Videos can cause viewing problems on smartphones and tablets.
Click Here!