YouTube

Embedding YouTube with specific start point

If you embed a YouTube by using the Embed by URL tool, it doesn't seem to be possible to specify a specific start point - it gets stripped by the embedding.

E.g. https://youtu.be/-WB7Rq5SNR4?t=69 embedded below starts at the beginning...

Another issue with embedding by URL is that it is not possible to edit the URL once it has been embedded if, for example, you are using a page as a template and duplicating it and want edit the YouTube URL

The solution is to use the embed code from the YouTube page

To get the embed code: On the YouTube page click the share button below the video, select the 'Start at' checkbox, click the  embed button 

This YouTube was embedded using the following embed code and starts playback at 1m05s (start=65)

<iframe width="560" height="315" src="https://www.youtube.com/embed/-WB7Rq5SNR4?start=65" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

However, the problem with this is that the height and width are now fixed and not responsive to the screen size.

A solution to the responsive embed issue is to use https://embedresponsively.com/  which will generate responsive embed code for the YouTube URL https://youtu.be/-WB7Rq5SNR4  (but not for https://youtu.be/-WB7Rq5SNR4?t=69 )

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//-WB7Rq5SNR4' frameborder='0' allowfullscreen></iframe></div>

However, it is possible to edit the code generated by https://embedresponsively.com/  to achieve the desired result

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/-WB7Rq5SNR4?start=65' frameborder='0' allowfullscreen></iframe></div>

Embed YouTube with subtitles

To embed a YouTube video with subtitles appearing in a selected language by default, you need to add the following parameters to the YouTube URL in the embed code from YouTube:

?hl=xx&amp;cc_lang_pref=xx&amp;cc_load_policy=1

where xx is replaced by an ISO 639-1 two-letter language code. 

The video embedded here is set to automatically display French subtitles

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q8Sq9r50gc0?hl=fr&amp;cc_lang_pref=fr&amp;cc_load_policy=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>