Monday , March 18 2019

The #1 Most Commonly Missed Mobile Optimization (and how you can fix it forever with two simple pieces of code

These days, if your site’s NOT mobile-friendly, you’re losing readers & subscribers, period.

Think about what you do… You’re on your phone searching for something in Google, or you click on a link in an email, or your buddy sends you a “funny” URL to go to…

…So you click on it.

Next instant, you find yourself on a site that doesn’t quite fit your mobile screen. You have to slide left so you can see the right side content… It’s hard to read anything because the font is all mixed up and images are sized too big.

What do you do?


And you probably NEVER go back to that site again. (on purpose)

So, mobile optimizing your site is very important. You got that. Maybe you’ve even chosen a theme or blog template that is mobile-friendly and looks great on your smart phone.

But, I guarantee you… There’s ONE mobile optimization that you haven’t considered.

…And if you have… If you’ve looked at your embedded video and thought, “Damn, that just doesn’t look right.” you might not have known what to do; how to optimize it for mobile.

Well, while there may be a plugin out there to help you do this, it’s likely that it’s also going to do 13 other things that you just don’t need it to do.

The smartest way to do this (maybe not the simplest) is to CODE it into your site.

Sounds kinda scary if you’ve never worked with HTML or CSS, but I promise you… I’m gonna make it look easy. I’ll also give you the code to copy and paste into your site, so you never have to worry about messing up a ‘semi-colon’ or typing the wrong ‘class name’.

In this first video, we’ll write the CSS so that our videos know what to do when they’re “wrapped” in our cozy mobile-friendly DIV tags. Watch this first one before moving forward…

The Code That Goes Into The Custom.css Area Of Your Blog Theme

.video-embed {
 overflow: hidden;
 padding-bottom: 56.25%;
 position: relative;
 height: 0;
 border: 2px solid $color1;
 margin-bottom: 15px;

.video-embed iframe{
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 position: absolute;

Now, once you’ve got this in place, remember that it’ll ONLY work effectively if your video is formatted to a 16:9 ratio. (1920×1080 or 1280×720 are great export ratios which can then be reduced to 700×394 for large content areas or for most a 640×360 will work well)

That said, it’s more of a “formality” to select these sizes when embedding your video because whenever the code above is “called in” (this will make more sense in a moment) your video will resize to fit the entire ‘container’ of your content area.

For example: If your content area is 700px and you post a video using the DIV tags (as explained below) then your video will be 700px by 394px (give or take a pixel on the height and assuming you exported at a 16:9 ratio)

Now that you know how the CSS will work with your video, lets “call in” this code using some DIV tags.

Tip: When working with CSS you’ll hear about “class” and “id”. You’ll see this in some HTML where it’ll say something like…

<div class="your-css-class"></div>
<div id="your-css-id"><div>

Classes are started with a “.” (period or dot) while IDs are started with a “#” (octothorp or hashtag) in your CSS. You’ll notice that we’re using a class in the CSS, so we are calling in a “class” in the HTML.

When you begin learning code, it can cause quite the headache and be very frustrating at times.

But, the longer you work with it, the more beautiful it becomes, and you come to realize that you can make just about anything happen with just a few lines of strategically placed code.

[bctt tweet=”Computer language is digital magic, man.”]

Let’s dig into the HTML and learn how to call in our CSS to work around our Videos.

The Code That Wraps Around Your Video Embed Code

<div class="video-embed">YOUR VIDEO EMBED CODE HERE</div>

So, from now on, all you’ve got to do to ensure that your video is mobile friendly, like these two are right here (go check this blog post out on your mobile device to see)…

Note: Those aren’t “black bars” on the top and bottom of the videos (those are purposely placed black boxes with a 85% opacity which you can see if you look closely enough). This was to cover all the “distractions” on my desktop.

You will simply place the above code before your video embed code. And always remember to close the DIV tag as shown above.

If you don’t do it, you’ll notice VERY quickly that you’ve forgotten to. Your content will look a little silly.

It’s not detrimental though, just head back to your post and add the closing DIV tag to the end and you’ll be back in business.

If you’ve never worked with code before, this might still sound complicated. My objective here is to make something terrifying to the “technophobe” simple, easy, and fun to work with.

It really is quite fun when you see your code working in action!

If you’ve got any questions about these two pieces of CSS and HTML, ask me in the comments below.

But, before you head off coding up your videos, I’d love to hear from you right now. Did you enjoy this post? Did you find something here that you’ve never learned before? Let me know in the comments below!

Leap into that CSS & HTML and transform your videos into gorgeous mobile-friendly masterpieces.

About Nick Haubner

Nick is an innovative entrepreneur and thought-leader. He's always coming up with new angles and "gamified" elements to engage his audience in a way that's not only educational, but fun & rewarding. And, with 7+ years of meticulous studies of various religions, philosophies, and ways of being, he blends his own unique perspective with these "ideas" to bring you a deep (yet easy to understand & lighthearted) view of the World that'll open your eyes and inspire you to dig deeper into yourself to be the BEST you that you can be. Enjoy!

You Might Like This Too...

Why Are They Becoming So Obsessed with ONE Focus?

If you’ve been looking very closely, you might have noticed something happening in several different …