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 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.


Read more »

Yii2 Insert and Ignore duplicates

February 25, 2017 , ,

One of the things that comes with learning a framework is that we should change a bit the way we work in order to correctly build an app.

One of the frameworks I’ve used the most (on a personal and professional level) is Yii2 and my experience has been excellent – fast, reliable and well maintained.

One of the pain points I got since the beginning is the way the database interaction system works that in the end is quite simple, but only now that I understand it. One of the situations that I had to solve was how to do an Insert/Update, so below here’s a snippet on how to do it.

$model::YourModel::findOne(ID); // findOne() searches for the table key, you can use find()->where('=', 'column', 'name')->one(); to identify the model.

    $model = new YourModel;

$model->column_1 = 'text';
$model->column_2 = 123;

The logic is:

  • You try to find if you already have the item in the Databse by calling the findOne(key);
  • If there’s no model, create it from scratch;
  • Assign values to the fields
  • Save

That should really be it, I’m surprised there’s no other documentation explaining this quickly and simple.

Feel free to post any questions below.

Read more »