Embedded YouTube videos make my site fail Google's mobile optimization tests

Question

I have a website with a responsive theme optimized for mobile.

Despite that, many pages don't pass the "mobile-friendly test" from Google (https://search.google.com/test/mobile-friendly)

Here is the result of the validation attempt on Google's tool:

(the reasons why the validation fail are: text too small; clickable elements too close to each other)

I've found out that all the pages of my site unable to pass this test contain an embedded YouTube video.

If I remove the video, each of these pages passes the test.

The video is added with the following code:

 <div class="video-container">
     <iframe width="853" height="480" src="https://www.youtube.com/embed/UbtGFrUpri4"
     frameborder="0" allowfullscreen></iframe>
 </div>

The CSS is:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

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

The video scales responsively on my mobile device.

My question is: is there a way to have my page mobile-friendly embedding a YouTube video?

Also I would be curious to know whether it's normal that Googlebot doesn't parse CSS and JS, and shows the "your browser doesn't support this feature" snippet instead of the video.

Answer 1

Ok, this was tricky because Google's suggestions are deceitful: Google talks about "clickable elements too close to each other" and "small text", but looking at the screenshot, the problem is that the video container is too big (despite the responsive wrapper).

Considering that there's an error type in the tool called "content bigger than the screen", I have no idea why Google didn't make this case fall into this category.

Anyway, forget about small text, forget about the fact that the actual video is scaling responsively on any actual mobile phone: Googlebot will see a large iframe going off-screen, marking your site mobile-unfriendly.

The only solution I found was to remove the width and height attribute in the HTML code of the iframe. In other words, you have to alter the normal youtube embedding code that will now look like this:

 <iframe src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen>
 </iframe>

This lets me pass the mobile friendly test on all the offending pages.

Hopefully, the removal of the height and width attributes won't create any problems to the normal output of the video for normal browsers.

Let me know if you have a better solution or think it could cause any issues.

Answer 2

I can't read the language the report is in, but I am guessing from what I can gather that the reason is that the default YouTube embed method involves an iframe which is a default number of pixels.

While this is fine for a computer's browser to handle, it's not best practice for mobile devices. It is possible to embed in a responsive way, so that the video is scaled to the screen and the content around it.

If you're comfortable with writing the CSS or JS requires, CCS-Tricks have a couple of workable solutions which should resolve your issues.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

This is their suggestion for doing this with CSS to force the video into a responsive window.

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349"
 src="http://www.youtube.com/embed/VIDEO_ID?rel=0&hd=1" 
 frameborder="0" allowfullscreen></iframe>
</div>

Using this CSS to style the container.

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

An alternative uses jQuery to dynamically resize the video.

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

Alternatively, if you're not comfortable with implementing these, a service such as EmbedResponsively would handle everything for you. I can't personally attest to how robust this solution is as I've not used it, but it is the first Google result for YouTube embed responsive.
https://embedresponsively.com/