I remember when responsive design wasn’t even a thing, but after the introduction of the iPhone, mobile device compatibility became the new normal.
Adopting mobile usability was not only a progressive move for website owners, it was a great segue for Google to introduce more signals into their algorithm. In the early days, Google Search results could be easily manipulated. After seeing the impact this had on the quality of their search results, Google was forced to become increasingly complex with how SEO was treated and introducing usability became one of those factors.
Mobile-friendliness has rapidly become integral to SEO, and sometimes all that it takes to fail a mobile-friendly test is improperly embedded content.
Let’s fix that.
What is the Mobile-First Index?
The majority of Google searches are happening on mobile. Let that sink in for a second, then think about how prepared your site is for the mobile-first index that Google will inevitably be deploying.
As the number of mobile Google users grew, Google realized that using desktop content to deliver results in their ranking systems was no longer staying true to their core competencies or their end user.
Google stated, “Our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site.”
Thereby putting mobile first, further placing importance on ensuring that your content is both desktop- and, more importantly, mobile-friendly.
Embedding YouTube Video Responsively
YouTube boasts 1 billion users each month, and over half of their watch time is happening on mobile. With that kind of traffic, you could expect that YouTube videos are the most embedded piece of code on sites worldwide.
Although responsive design is not a new concept, embedded content doesn’t always adhere to the out-of-the-box mobile-ready templates. Sometimes the only thing that prevents a web page from being mobile-friendly can be something as simple as an embedded YouTube video.
Not only do you run the risk of ruining the user experience with an unresponsive video, you are potentially hindering your success with organic search rankings within the mobile-first index.
The Solution
The snippet below will allow you to embed any public YouTube video onto your site, making it responsive to any device.
Within the snippet example linked below, simply replace the unique YouTube ID with the ID of the video you’d like to embed. The unique YouTube ID can be found in the URL of the video after the ‘v=‘:
For example this URL:
https://www.youtube.com/watch?v=XEL65gywwHQ
Would replace the part in red in the snippet below:
http://www.youtube.com/embed/XXXXXXXXXXX
To look like this:
http://www.youtube.com/embed/XEL65gywwHQ
See the Pen Embed a YouTube Video Responsively by UpBuild (@upbuild) on CodePen.
The Result
Here is the end result: a fully responsive video for any device to ensure a fully engaged user experience.
Embedding an iFrame Responsively
Sometimes iframes are simply unavoidable. The iframe is from a time in web development where simply delivering the content was more important than user experience or even search engine optimization.
In the scenario that an iframe is a necessity, you will want to ensure that you have adapted this old framework into the new world of mobile usability.
HTTPS, HTTP & iFrames
When a user visits a page served over HTTPS their connection is authenticated, safe and encrypted with SSL. Without such encryption (HTTP) the user’s connection is open and vulnerable. So if your website happens to make the switch to HTTPS and you are embedding content with an iframe that is using an HTTP connection, the page would be considered only partially encrypted, serving what is known as mixed content.
Mixed content is an important issue that concerns web pages on all devices and is now blocked by all major browsers. As the web begins to make a more conscious shift towards implementing HTTPS, there may be some assets embedded in iframes using HTTP that are caught in the crossfire.
An HTTPS connection does not transfer any sort of encryption to an iframe regardless of the connection that the iframe contains. To avoid any affiliation with mixed content always ensure that your iframe connection is using an HTTPS protocol.
The Solution
Allowing your embedded iframe to become responsive on any device (after ensuring that the content contains an HTTPS connection) is an important step to ensure that your user experience is seamless and fully contained.
Simply replace the URL in the code snippet linked below with any HTTPS URL of your choice:
For example:
https://www.getcredo.com/
See the Pen Embed an iframe Responsively by UpBuild (@upbuild) on CodePen.
Verifying Your Mobile-Friendliness
Lastly, you can always check to see if any of your web pages are considered mobile-ready with Google’s very own Mobile-Friendly Testing Tool.
Although Google becomes increasingly sophisticated with how they qualify websites for user queries in search results, SEO ultimately revolves around the usability of your site. If your users find your content useful and it completes their journey as a searcher then you have successfully provided value, which Google quantifies.
By putting the user first and optimizing your website based on a strong user experience is just one of the steps you can take to better prepare your site for the upcoming mobile-first index.
