CSS Archives

How to embed your latest YouTube Video with responsive CSS

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.

Read more

How to centre an element in CSS

In the olden days of HTML development, in the late 90ies, we only had inline styles. Centring an element was done using the <center> property. That approach isn’t very elegant anymore in modern CSS 🙂 Today we can use something like this: #your-id .your-class { display: block; margin-left: auto; margin-right: auto; } It’s slightly more … Read more

How to use the new Apple System Font SAN FRANCISCO on your website

Apple have a new System Font in El Capitan and all of their other products starting 2015: it’s called San Francisco. It’s very similar to their previous font Helvetica Neue, but apparently San Francisco is better for your eyes (not to mention the fact that Helvetica Neue isn’t owned by Apple, and obviously we can’t … Read more