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.
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;
- 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.
Yii2 Insert and Ignore duplicates
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. if(!$model): $model = new YourModel; endif; $model->column_1 = 'text'; $model->column_2 = 123; $model->save();
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
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.