Howto: YouTube Embed with custom start time

tips & tricks
1

First, create a new shortcode named youtube.html.

Then add the following code:

<div class="responsive-embed widescreen">
    <div class="embed video-player">
        <iframe class="youtube-player" type="text/html" width="640" height="385"
                src="http://www.youtube.com/embed/{{ index .Params 0 }}" start="{{ index .Params 1 }}" allowfullscreen frameborder="0">
        </iframe>
    </div>
</div>

Then, you can add a second attribute for the time in seconds where you wish for the video to start:

{{< youtube oXi76HDygi8 706 >}}

My example uses default Zurb Foundation styling to make it responsive, so you will need to style it yourself. The point is, adding the start parameter.

2

Hum…that didn’t seem to have any effect for me. Starts it at the beginning.

3

I found a way that works as it looks like you need to add the start time as part of the query string. I copied the original internal shortcode code for youtube.html and named it youtubetime.html. Then I used the following:

<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
  <iframe src="http://www.youtube.com/embed/{{ index .Params 0 }}?start={{ index .Params 1 }}"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouTube Video"></iframe>
</div>
4

With embedded youtube the arg is start in seconds, not t like a normal url.
You can see this when you click share on youtube and click embedded and then click the “start at” checkbox.

Example:

{{< youtube id="abc?start=386" autoplay="false"
6

To specify start time and end time, this shortcut youtubestartend.html works for me:

<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
    <iframe src="http://www.youtube-nocookie.com/embed/{{ index .Params 0 }}?start={{ index .Params 1 }}&end={{ index .Params 2}}"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouTube Video"></iframe>
</div>

For example to start at 1:10 and end at 1:28:

{{< youtubestartend vGjJ5p8N2nA 70 88 >}}

Improvements always welcome.