Hugo Shortcodes

Example vimeo Display 

Using the preceding vimeo example, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.

youtube 

The youtube shortcode embeds a responsive video player for YouTube videos. Only the ID of the video is required, e.g.:

https:<span class="hljs-comment">//www.youtube.com/watch?v=w7Ft2ymGmfc</span>

Example youtube Input 

Copy the YouTube video ID that follows v= in the video’s URL and pass it to the youtube shortcode:

example-youtube-input.md


{{<span class="xml"><span class="hljs-tag">< <span class="hljs-attr">youtube</span> <span class="hljs-attr">w7Ft2ymGmfc</span> ></span></span>}}

Furthermore, you can automatically start playback of the embedded video by setting the autoplay parameter to true. Remember that you can’t mix named and unnamed parameters, so you’ll need to assign the yet unnamed video id to the parameter id:

example-youtube-input-with-autoplay.md


{{<span class="xml"><span class="hljs-tag">< <span class="hljs-attr">youtube</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"w7Ft2ymGmfc"</span> <span class="hljs-attr">autoplay</span>=<span class="hljs-string">"true"</span> ></span></span>}}

Example youtube Output 

Using the preceding youtube example, the following HTML will be added to your rendered website’s markup:

example-youtube-output.html



<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"</span><span class="p">></span>
  <span class="p"><</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube.com/embed/w7Ft2ymGmfc?autoplay=1"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"</span> <span class="na">allowfullscreen</span> <span class="na">title</span><span class="o">=</span><span class="s">"YouTube Video"</span><span class="p">></span><span class="p"><</span><span class="p">/</span><span class="nt">iframe</span><span class="p">></span>
<span class="p"><</span><span class="p">/</span><span class="nt">div</span><span class="p">></span>

Example youtube Display 

Using the preceding youtube example (without autoplay="true"), the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup. The video is also include in the Quick Start of the Hugo documentation.