About ViewLike

March 9, 2020

We help you check out how your website looks in the most popular resolution formats and screen sizes. We support desktop, Laptop, Smartphones and tablets! It’s all powered by Ajax & PHP so no need to download anything! To Get started just type your URL in the box on the left.

Read more »


How-to: Youtube (Live!) CSS / JavaScript video background

Following the huge success of our other post about how to apply a CSS Video Background, here’s the follow-up post with the updated code to do the equivalent effect, but this time with a Live Video from YouTube.

Don’t forget the tips we gave on the other post regarding video backgrounds that are still available for this one.

DEMO: Codepen.

Before starting, please take in consideration:

  • Use a video background is it’s really going to improve your site’s look and feel in a positive way. It’s very easy to get lost in fancy stuff and make your site slower and harder to navigate;
  • Don’t use sound. Really. Just don’t. It’s makes your video heavier and adds no value. The example code adds “mute” by default, but you also have the option to enable/disable sound by clicking the icon.

The HTML Code

Nothing fancy here, but a few notes:

  • We include jQuery(We recommend this app for learning jquery);just for the sound manipulation, if you don’t use it, you can remove it;
  • YouTube API is included here but called in the JavaScript file;
  • The code uses CSS Bootstrap 3 that is not included in the header because the code is copied from Codepen. Scroll down to check the direct link.

(more…)

Read more »