Deze code genereert een Hero section met een Youtube video achtergrond, een overlay (aan te passen via css van het codeblock) en een div voor het tonen van inhoud. De Youtube video kan horizonaal en verticaal verschoven worden. Ook kan bepaald worden op hoeveel seconden wordt ingestart en hoe lang de video moet duren. Het gekozen deel van de video herhaalt zichzelf daarna oneindig.
{"component":{"id":253,"name":"ct_section","options":{"ct_id":253,"ct_parent":0,"selector":"section-253-4","original":{"display":"flex","align-items":"center","background-size":"auto","background-repeat":"no-repeat","background-attachment":"scroll","background-position-left-unit":"%","background-position-left":"0","background-position-top-unit":"%","background-position-top":"0","gradient":{"colors":[],"linear-angle":"135","gradient-type":"radial","radial-shape":"ellipse","radial-size":"closest-corner"},"container-padding-left":"1","container-padding-right":"1","background-blend-mode":"normal","flex-direction":"row","text-align":"center","background-color":"rgba(0,0,0,0.45)","position":"relative","overflow":"hidden"},"activeselector":false,"nicename":"Hero Youtube","ct_category":"Heros & Titles","ct_depth":1},"children":[{"id":254,"name":"ct_code_block","options":{"ct_id":254,"ct_parent":253,"selector":"code_block-254-4","original":{"image_type":"2","attachment_size":"full","code-php":"<?php\n// The API will call this function when the video player is ready\n// The myseekTo will make the video repeat itself\n$id = 'ZM6IH9lknL8';\n$seconds = 20; \n$duration = 355;\n$top = 40; // (%) vertical placement relevant for desktop\n$left = 50; // (%) horizontal placement relevant for mobile\n\n$stop = $seconds + $duration;\nif (!empty($id)) {\necho \"<style>:root {--youtube-top: $top%; --youtube-left: $left%; --youtube-transform-top: -$top%; --youtube-transform-left: -$left%;}</style>\";\necho \"<script type='text/javascript'>\";\necho 'function onPlayerReady(event) {';\necho 'event.target.mute();';\necho \"event.target.loadVideoById({'videoId':'$id','startSeconds': $seconds ,'endSeconds': $stop});\";\necho 'event.target.playVideo();';\necho '}';\necho 'function myseekTo() {';\necho \"player.seekTo( $seconds );\";\necho '}';\t\necho '</script><div id=\"fwp-player\"></div><div id=\"fwp-overlay\"></div>';\n}\n?>","code-css":"#%%ELEMENT_ID%% {\n\tposition: absolute;\n\ttop: 0px;\n\tleft:0px;\n\twidth:100%;\n\theight:100%;\n}\n#fwp-player {\n\tposition: absolute;\n\ttop: var(--youtube-top);\n\tleft: var(--youtube-left);\n\t-webkit-transform: translate(var(--youtube-transform-left),var(--youtube-transform-top));\n -ms-transform: translate(var(--youtube-transform-left),var(--youtube-transform-top));\n transform: translate(var(--youtube-transform-left),var(--youtube-transform-top));\n\toverflow: hidden;\n\twidth: 100vw;\n\theight: 100vh;\n\tmin-width: 100vw;\n}\n#fwp-overlay {\n\tposition: absolute;\n\twidth:100%;\n\theight: 100%;\n\tbackground-color: rgba(0,0,0,0.10);\n}","code-js":"function rescalePlayer() {\n\tlet scale = 1.4;\n\tconst elem = document.getElementById('fwp-player');\n\tlet box_player = elem.closest('section');\n\t//document.querySelector('#section-227-4');\n\tlet width_player = scale * box_player.offsetWidth;\n\tlet height_player = scale * box_player.offsetHeight;\n\t\n\tif (height_player / width_player < 9 /16 ) {\n\t\theight_player = width_player * 9 / 16;\n\t} else {\n\t\twidth_player = height_player * 16 / 9;\n\t};\n\n\tdocument.getElementById(\"fwp-player\").style.width = width_player + \"px\";\n\tdocument.getElementById(\"fwp-player\").style.height = height_player + \"px\";\n}\nwindow.onload = rescalePlayer;\nwindow.onresize = rescalePlayer;\n// This code loads the IFrame Player API code asynchronously.\n var tag = document.createElement('script');\n tag.src = \"https://www.youtube.com/iframe_api\";\n var firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n// This function creates an <iframe> (and YouTube player)\n// after the API code downloads.\n var player;\n function onYouTubeIframeAPIReady() {\n player = new YT.Player('fwp-player', {\n\t\t host: 'https://www.youtube-nocookie.com',\n\t\t playerVars: {\n playsinline: 1,\n\t\t\tcontrols : 0,\n\t\t\tautoplay :1,\n\t\t\tfs : 0,\n\t\t\torigin: window.location.host\n },\n \tevents: {\n \tonReady: onPlayerReady,\n\t\t\tonStateChange : \n\t\t \tfunction(e) {\n \t\t\tif (e.data === YT.PlayerState.ENDED) {\n\t\t\t\t\t\tmyseekTo();\n//\t\t\t\t\t\tplayer.seekTo(0); // this will make it repeat from the start\n\t\t\t\t\t\tplayer.playVideo();\n\t\t\t\t\t}\n\t\t\t\t\tif (e.data === YT.PlayerState.PAUSED) {\n\t\t\t\t\t\tplayer.playVideo();\n\t\t\t\t\t}\n\n \t\t}\n \t}\n }); \n }"},"nicename":"Player Youtube","ct_depth":2,"ct_content":""},"depth":2},{"id":255,"name":"ct_div_block","options":{"ct_id":255,"ct_parent":253,"selector":"div_block-255-4","original":{"z-index":"1","width":"100","width-unit":"%","min-height":"100","text-align":"left","align-items":"center","justify-content":"center"},"nicename":"Div (#241)"},"depth":2,"children":[{"id":257,"name":"ct_div_block","options":{"ct_id":257,"ct_parent":255,"selector":"div_block-257-4","original":{"z-index":"100","display":"flex","grid-column-count":"1","grid-row-count":"1","grid-match-height-of-tallest-child":"true","flex-direction":"column","align-items":"center","text-align":"center"},"activeselector":false,"nicename":"Site title and tagline"},"children":[{"id":258,"name":"ct_text_block","options":{"ct_id":258,"ct_parent":257,"selector":"text_block-258-4","original":{"color":"#ffffff","font-size":"60","font-weight":"600","text-shadow-color":"rgba(1,1,1,0.25)","text-shadow-horizontal-offset":"1","text-shadow-vertical-offset":"1","text-shadow-blur":"5"},"activeselector":false,"nicename":"Site title","media":{"phone-landscape":{"original":{"font-size":"45"}}},"ct_content":"<span id=\"ct-placeholder-259\"></span>"},"children":[{"id":259,"name":"ct_span","options":{"ct_id":259,"ct_parent":258,"selector":"span-259-4","ct_content":"[oxygen data='bloginfo' show='name' ]","nicename":"Span (#192)"},"depth":5}],"depth":4},{"id":260,"name":"ct_text_block","options":{"ct_id":260,"ct_parent":257,"selector":"text_block-260-4","original":{"color":"#ffffff","text-shadow-horizontal-offset":"1","text-shadow-vertical-offset":"1","text-shadow-blur":"5","text-shadow-color":"rgba(1,1,1,0.25)","font-size":"30"},"activeselector":false,"nicename":"Site tagline","media":{"phone-landscape":{"original":{"font-size":"20"}}},"ct_content":"<span id=\"ct-placeholder-261\"></span>"},"children":[{"id":261,"name":"ct_span","options":{"ct_id":261,"ct_parent":260,"selector":"span-261-4","ct_content":"[oxygen data='bloginfo' show='description' ]","nicename":"Span (#195)"},"depth":5}],"depth":4}],"depth":3}]}],"depth":1},"classes":{}}