Responsive Youtube

So when I actually loaded my website on my phone I saw that my embedded Youtube videos weren’t resizing automatically - i.e. not responsive. Some quick Googling and one of the top results was a nice elegant solution via CSS. I pretty much just added a margin and it was good to go.

.video-container {
  position: relative;
  margin: 30px;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0; 
  overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

It’s now one less thing to keep me awake at night. Now if I could just find the time to make my website not look like the default bootstrap theme that would be real nice - maybe I’ll extend one of the these themes. And maybe I’ll get a favicon too! One day…