Embeds
22nd September 2017 by Pedr Browne
102 Words / 2 Minute Read
Include responsive iframe or object embeds in your markdown. For the embedded item to be made responsive you must define its proportions, so you must supply both width and height set to unitless or pixel values. If both values are not supplied, the embed will not be made responsive.
YouTube
A standed YouTube embed:
<iframe src="https://www.youtube.com/embed/v30Ml-9xsRQ" frameborder="0" allowfullscreen></iframe>A responisive YouTube embed:
<iframe width="560" height="315" src="https://www.youtube.com/embed/v30Ml-9xsRQ" frameborder="0" allowfullscreen></iframe>Vimeo
A standard Vimeo embed:
<iframe src="https://player.vimeo.com/video/40686155?portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>A responsive Vimeo embed:
<iframe src="https://player.vimeo.com/video/40686155?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>Soundcloud
A Soundcloud embed (Soundcloud embed are already responsive):
<iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/188212367&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>Simple Embeds
There is also a simple form of embed for Vimeo and YouTube that will embed at a ratio of 16:9
`video: https://www.youtube.com/embed/v30Ml-9xsRQ`
`youtube: https://www.youtube.com/watch?v=v30Ml-9xsRQ`
`youtube: v30Ml-9xsRQ`
`vimeo: https://vimeo.com/40686155`
`vimeo: 40686155`