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.