newsletter iconSign up for our monthly CodeGeek newsletter to receive news about our blog, new projects, web development, and upcoming events.
You can also add us to your RSS feed!

  • Name * Required
  • Data Transfer * Required
    By checking this box, I understand that I consent to send my name, email and company (optional) to CodeGeek for the purposes of adding me to their email newsletter. CodeGeek uses MailChimp as their email service provider and I consent to having my information transmitted to MailChimp for these purposes.
  • This field is for validation purposes and should be left unchanged.

YouTube Audio and Video Out of Sync – (Window) Size Matters

Viewing YouTube videos on a mobile device

A common request came from one of our clients the other day: “I want to include some YouTube videos on my website. Can you do that for me?” No problem! We’ll simply get your videos uploaded, find the handy “Embed” code YouTube automatically generates and put it right where you want on your webpages.

The catch?

The client wanted the videos displayed at 315 x 177 pixels instead of the YouTube embed code default of 560 x 315 px. No big deal, right? Just change the pixel dimensions in the embed code and we should be all set.

But there was a problem: When watching the video on the client’s WordPress site, the audio was lagging by a few milliseconds, despite playing just fine in YouTube’s Video Manager. Apparently, YouTube videos don’t like embedded viewer windows smaller than the standard 560 x 315 window size.

What we think is happening is that the browser is compressing the YouTube video frames into smaller dimensions and in doing so, it’s taking the visual component longer to render, hence the video lag. So far the best solution we’ve come up with is converting the source video files into mp4’s (compared to the original AVI format we uploaded), re-uploading them to YouTube, and embedding those video links into the webpage. It’s an improvement but still not perfect.

The only perfect solution seems to be to embed the video at the original “default” YouTube embed dimensions of 560 x 315px.

Granted, YouTube gives you a few small/medium/large embedded window options. But if you want anything smaller, you get to battle this mysterious video/audio syncing problem where the audio lags behind the video by a few milliseconds—not a lot but enough to be noticeable (and quite irritating each time I watch it). Naturally, if you watch the videos natively on YouTube, they behave—just not on my site.

So I ask you, YouTube and web community: Who has a better answer?