I’ve recently had to update the code that’s responsible for pulling in my latest YouTube upload on the front page. I had previously used a solution that uses the channel name rather than the channel ID. Apparently that API has stopped working and I had to find a workaround.
In addition to making it work again, I also wanted my embed to be responsive and look handsome on all screen sizes. The trouble is that regular iFrame embeds use a static size for the video (like 600×360 or 800×480), but being the future-proof thinking kind of guy that I am, I wondered if there was a way to make this dynamic. The “height=auto” trick didn’t work for me, but thankfully I came across a great piece of CSS that adds this feature.
Let me show you both parts to solving this puzzle.