{"id":628,"date":"2020-08-10T13:23:27","date_gmt":"2020-08-10T13:23:27","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=628"},"modified":"2020-10-05T12:14:40","modified_gmt":"2020-10-05T12:14:40","slug":"canard","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/canard\/","title":{"rendered":"Looping video with autoplay"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To show a muted YouTube movie with looping and autoplay, use an url like <\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1652583152\" \n    id=\"codemirror-1652583152\"\n  >https:\/\/www.youtube.com\/embed\/pvTCuenxTsc?autoplay=1&amp;loop=1&amp;playlist=pvTCuenxTsc&amp;mute=1<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1652583152'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Note the use of <code>playlist<\/code>, set to the id of the video.<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/pvTCuenxTsc?autoplay=1&amp;loop=1&amp;playlist=pvTCuenxTsc&amp;mute=1\" allow=\"accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you don&#8217;t mute the video, autoplay will not work, so if you want to annoy your visitors you have to think of something else.<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/pvTCuenxTsc?autoplay=1&amp;loop=1&amp;playlist=pvTCuenxTsc&amp;mute=0\" allow=\"accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">More info on <a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\">YouTube parameters<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML5 video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I decided to use HTML5 &lt;video&gt; though, which loops fluently.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-html\">\n      HTML    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1093651960\" \n    id=\"codemirror-1093651960\"\n  >&lt;video autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; src=&quot;\/path\/to\/video.mp4&quot; style=&quot;width: 100%;&quot;&gt;&nbsp;&lt;\/video&gt;<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1093651960'), {\n      mode: 'xml',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Looping a video with autoplay. Either with YouTube or html5 video tag<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[42,37,36],"class_list":["post-628","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-html5","tag-video","tag-youtube"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":11,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/628\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/628\/revisions\/814"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}