feat(styles): provide `.youtube-responsive` for 16:9 rendering

[niklaas]

Attaching the class to a wrapper <div> ensures that the ratio of width and height of the included <iframe> remains 16:9. This applies to all viewing devices.

Example usage:

{{ youtube(id="aqz-KE-bpKQ", class="youtube-responsive") }}

[Keats]

Is that from the original theme?

[niklaas]

It is. At their demo site you can see how hugo compiles its YouTube shortcode to HTML:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="//www.youtube-nocookie.com/embed/ZJthWmvUzzc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen="" title="YouTube Video"></iframe>
</div>

This is a common pattern though.

I am not sure about the naming .youtube-responsive yet. But it's distinct (so easy to reference in the stylesheet) and explains what it is about.

Instead of providing the class, we could also think about extending/altering getzola/zola to compile the YouTube shortcode this way. I am happy to provide a PR for that.