Adding videos: Youtube

[philkunz]

Would be super cool if there was a standard way for adding youtube videos in the spec and by that in the official docker image ;)

[facelessuser]

Isn't there already an easy way?

1. Just select share in youtube.
2. Select embed
3. Copy and paste HTML into your Markdown.

I don't think there needs to be a special syntax when Youtube makes it easy to get exactly what you need.

[max-ci]

You can also use wrapper div for the iframe to keep aspect ratio and make it responsive:

For example:

<div class="video-wrapper">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/vZNyjuNLhIk" frameborder="0" allowfullscreen></iframe>
</div>

For 16:9, 9/16 = 56.25% of bottom padding, if you want 4/3 you can change bottom padding to 3/4 = 75%

.video-wrapper {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.video-wrapper > iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

[facelessuser]

And you can add your wrapper JS with the mkdocs feature extra_javascript. I think you have everything you need to accomplish this already without anything being explicitly added to Material.

[squidfunk]

iframe elements are stretched to the content section, see:
https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/base/_typeset.scss#L370

As embedding YouTube videos should be possible in plain HTML, and the Material theme doesn't provide Markdown parsers (for syntactic sugar syntax), I'm closing this issue. For further directions on embedding, please see the previous posts.