diff --git a/templates/Stimuli/video-embedding-youtube.study.json b/templates/Stimuli/video-embedding-youtube.study.json
new file mode 100644
index 000000000..3e7102522
--- /dev/null
+++ b/templates/Stimuli/video-embedding-youtube.study.json
@@ -0,0 +1,146 @@
+{
+ "components": {
+ "2": {
+ "id": "2",
+ "type": "lab.html.Screen",
+ "_tab": "Parameters",
+ "_template": true,
+ "files": {
+ "rows": []
+ },
+ "parameters": {
+ "rows": [
+ [
+ {
+ "name": "videoId",
+ "value": "dJRsWJqDjFE",
+ "type": "string"
+ }
+ ],
+ [
+ {
+ "name": "start",
+ "value": "73",
+ "type": "number"
+ }
+ ],
+ [
+ {
+ "name": "end",
+ "value": "291",
+ "type": "number"
+ }
+ ],
+ [
+ {
+ "name": "message",
+ "value": "The experiment will continue when the video is over.",
+ "type": "string"
+ }
+ ],
+ [
+ {
+ "name": "fade",
+ "value": "true",
+ "type": "boolean"
+ }
+ ]
+ ]
+ },
+ "responses": {
+ "rows": [
+ [
+ "",
+ "",
+ "",
+ ""
+ ]
+ ]
+ },
+ "messageHandlers": {
+ "rows": [
+ [
+ {
+ "title": "",
+ "message": "run",
+ "code": "// Select iframe\nconst iframe = document.querySelector('iframe')\n\n// Setup styles ----------------------------------------------------------------\nconst oldStyle = {\n backgroundColor: document.body.style.backgroundColor,\n transition: document.body.style.transition\n}\n\nlet footer\nif (this.parameters.fade) {\n document.body.style.transition = 'background-color 2s'\n document.body.style.backgroundColor = 'black'\n\n footer = document.querySelector('footer')\n footer.style.transition = 'background-color 2s, border-top-color 1s'\n window.setTimeout(() => {\n footer.style.borderTopColor = 'rgb(248, 248, 248, 0.2)'\n footer.style.color = 'rgba(255, 255, 255, 0.3)'\n footer.style.backgroundColor = 'black'\n }, 100)\n}\n\n// Setup YouTube iFrame interaction --------------------------------------------\n\nconst sendCommand = (data) => {\n iframe.contentWindow.postMessage(JSON.stringify(data), '*')\n}\n\niframe.addEventListener('load', () => {\n // Setup JS messaging API\n sendCommand({ event:'listening', channel: 'widget' })\n\n // Play video\n sendCommand({ event:'command', func:'playVideo' })\n}, { once: true })\n\n// Listen to any incoming status updates\nconst screen = this\nwindow.addEventListener('message', function _yt_event_listener(e) {\n if (e.origin === 'https://www.youtube-nocookie.com') {\n const data = JSON.parse(e.data)\n console.log('got data', data)\n\n // Video is over\n if (\n data.event === 'infoDelivery' &&\n data.info.playerState === 0 &&\n (screen.parameters.end\n ? data.info.currentTime >= screen.parameters.end\n : data.info.currentTime === data.info.duration)\n ) {\n // Remove event listener\n window.removeEventListener('message', _yt_event_listener)\n\n // Reset styles\n if (screen.parameters.fade) {\n document.body.style.backgroundColor = oldStyle.backgroundColor\n footer.style.backgroundColor = ''\n window.setTimeout(\n () => document.body.style.transition = oldStyle.transition,\n 2200\n )\n }\n \n // End screen\n screen.end()\n }\n }\n})"
+ }
+ ]
+ ]
+ },
+ "title": "Embedded YouTube video",
+ "content": "\n \n \n\n\n\n",
+ "notes": "This template embeds a YouTube video. Please note that it is, in general, vastly preferable to embed a video file directly in the study, as this will provide a higher degree of control over the presentation and lets us better keep track of what participants do. Please also make sure to check the embedding extensively: We try to keep the integration up-to-date, but YouTube may change the way they present videos without notice.\n\nTo enable autoplay, participants must have interacted with the study on previous components.\n\nSettings:\n* VideoId: YouTube video id, as in the last part of https://www.youtube.com/watch?v=xxx\n* Start and end: points at which to start and end the video, in seconds\n* Message: Text to show in the window footer while the video is playing\n* Fade: Fade the background to black while the video is playing (true/false)"
+ },
+ "root": {
+ "id": "root",
+ "title": "root",
+ "type": "lab.flow.Sequence",
+ "children": [
+ "2"
+ ],
+ "parameters": {
+ "rows": [
+ [
+ {
+ "name": "",
+ "value": "",
+ "type": "string"
+ }
+ ]
+ ]
+ },
+ "plugins": [
+ {
+ "type": "lab.plugins.Metadata"
+ }
+ ],
+ "metadata": {
+ "title": "Youtube video embedding",
+ "description": "",
+ "repository": "https://github.com/felixhenninger/lab.js",
+ "contributors": "Felix Henninger (https://felixhenninger.com)"
+ }
+ }
+ },
+ "version": [
+ 19,
+ 1,
+ 1
+ ],
+ "files": {
+ "files": {
+ "index.html": {
+ "content": "data:text/html,%3C!doctype%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%3Ctitle%3EExperiment%3C%2Ftitle%3E%0A%20%20%3C!--%20viewport%20setup%20--%3E%0A%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%20%20%3C!--%20lab.js%20library%20and%20experiment%20code%20--%3E%0A%20%20%24%7B%20header%20%7D%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3C!--%20If%20you'd%20rather%20have%20a%20container%20with%20a%20fixed%20width%0A%20%20%20%20%20%20%20and%20variable%20height%2C%20try%20removing%20the%20fullscreen%20class%20below%20--%3E%0A%20%20%3Cdiv%20class%3D%22container%20fullscreen%22%20data-labjs-section%3D%22main%22%3E%0A%20%20%20%20%3Cmain%20class%3D%22content-vertical-center%20content-horizontal-center%22%3E%0A%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Ch2%3ELoading%20Experiment%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EThe%20experiment%20is%20loading%20and%20should%20start%20in%20a%20few%20seconds%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fmain%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A",
+ "source": "library"
+ },
+ "style.css": {
+ "content": "data:text/css,%2F*%20Please%20define%20your%20custom%20styles%20here%20*%2F",
+ "source": "library"
+ }
+ },
+ "bundledFiles": {
+ "lib/lab.js": {
+ "type": "application/javascript"
+ },
+ "lib/lab.js.map": {
+ "type": "text/plain"
+ },
+ "lib/lab.fallback.js": {
+ "type": "application/javascript"
+ },
+ "lib/lab.legacy.js": {
+ "type": "application/javascript"
+ },
+ "lib/lab.legacy.js.map": {
+ "type": "text/plain"
+ },
+ "lib/lab.css": {
+ "type": "text/css"
+ },
+ "lib/loading.svg": {
+ "type": "image/svg+xml"
+ }
+ }
+ }
+}