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?