Make an iframe responsive

Snippet of CSS to make an iframe responsive and keep a 16:9 proportion.

.youtube-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

That will make this:

Image from example note with wrong styles

Look like this:

Image from example note with correct styles

You can see if Collected Notes support it below: