3 simple steps to fix the disappearing YouTube video + SSL problem

If you’re running a WordPress website with http (not https), you may be hearing from Google.

If your site is small and doesn’t include an e-commerce component or collect sensitive data, then you haven’t needed to purchase an SSL in the past.

But times they are a-changin’.

What is SSL?

Anyone who sells products or services from their website—from Amazon.com to your local retailer—is already using an SSL to protect transactions. An SSL certificate tells the Internet that your site is trusted, secure, and credible. But informational/brochure sites, blogs, and the like largely have been able to get by without it.

Until now.

Especially if you have a login form on your website, you MUST add an SSL certificate to your domain. Why? Because Google says so.

But there are other reasons to add SSL even if you aren’t collecting sensitive information:

• https sites load faster. In a test on HTTP vs HTTPS.com, the insecure version of the page loads 876% slower than https.
• Back in 2014, Google said they would start giving preference to sites with an SSL. Since that time, encrypted sites have earned a boost in search engine rankings over their unsecured counterparts.
• You MAY get penalized for not having an SSL installed. I stress MAY because Google tends to stir up a lot of panic (read: bullshit) when it makes claims like this. Get one, for sure, but don’t freak out if you don’t have one already.

Do I have an SSL certificate?

You can determine if you have an SSL installed by visiting your website and looking at the address bar. It will indicate either secure, with a lock icon:

or insecure, with an icon similar to this:

Adding the certificate is as simple as contacting your web manager or hosting company and having them install it. The next step is to have your web manager set up a redirect to ensure that all http links point to https.

________________

Quick SEO tip!

When you add an SSL certificate to your domain, you should alert Google to the changes so they can re-index your site. This article by Really Simple SSL will walk you through how to do it painlessly. Highly recommended read!

________________

When SSL makes insecure content

But you may not be finished yet. In some cases, adding an SSL then creates “insecure content,” meaning that there are elements (such as images or video) embedded in your webpages that cannot be verified and, therefore, seem to disappear.

A common fix is to install a WordPress plugin such as SSL Insecure Content Fixer, which allows you various levels of “fixes” depending on your need. In most cases, the Simple level seems to do the trick.

But not always.

YouTube videos in particular seem to present a problem. (YouTube, which is owned by Google, right? You would think… But I digress.)

In the past, you might’ve embedded and floated your YouTube video with the basic iframe, something like this:

But once you installed your SSL, you may have found that the video simply disappears. It might load for a second and then POOF!

Follow these three steps to correct this quickly and easily:

1. Match the YouTube link to your site’s security level.

You do this simply by adding an “s” into the src line, changing http to https, like so:

2. Set up the CSS.

If you have styling applied to your iframe, as we do here—particularly if you’re floating the iframe—you have to make a few adjustments to apply the float to a div and clear the float.

First, add the following code to your Custom CSS area, matching the width and height to the width and height of your YouTube video and applying whatever styling you need:

Next, remove the style=”” section of your code. It now should look like this:

3. Wrap the iframe in a div.

Then simply add the div to your code, which will apply the CSS to that area.

And voila! Your YouTube video should once again appear on the frontend of your website.