{"id":3706,"date":"2022-08-23T14:05:42","date_gmt":"2022-08-23T14:05:42","guid":{"rendered":"https:\/\/www.tkdesign.it\/truck-design\/"},"modified":"2026-03-16T08:16:07","modified_gmt":"2026-03-16T08:16:07","slug":"truck-design","status":"publish","type":"page","link":"https:\/\/www.tkdesign.it\/en\/","title":{"rendered":"Truck Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3706\" class=\"elementor elementor-3706 elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-510ecd5 section-banner elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"510ecd5\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c9ab545 main-column\" data-id=\"c9ab545\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0332148 elementor-widget elementor-widget-html\" data-id=\"0332148\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"video-section\">\n\t<img decoding=\"async\" id=\"placeholder-video\" src=\"https:\/\/www.tkdesign.it\/wp-content\/themes\/tk\/placeholder-video.jpg\" \/>\n\t<div id=\"player\"><\/div>\n\t<button class=\"mute-video hidden\" id=\"mute\"><\/button>\n<\/section>\n<script>\n\t\n\tvar tag = document.createElement('script');\n\ttag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n\tvar firstScriptTag = document.getElementsByTagName('script')[0];\n\tfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\t\n\tvar player;\n\t\n\tfunction onYouTubeIframeAPIReady() {\n\t\tplayer = new YT.Player('player', {\n\t\t  height: '100%',\n\t\t  width: '100%',\n\t\t  videoId: 'LYME8_mwVMQ',\n\t\t  playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'loop': 1, 'controls': 0, 'modestbranding': 1, 'playlist': 'LYME8_mwVMQ' },\n\t\t  events: {\n\t\t\t'onReady': onPlayerReady,\n\t\t\t'onStateChange': onPlayerStateChange\n\t\t  }\n\t\t});\n\t  }\n\t\n\tfunction onPlayerReady() {\n\t  console.log(\"hey Im ready\");\n\t  \/\/do whatever you want here. Like, player.playVideo();\n\t  document.getElementById(\"placeholder-video\").classList.add('hidden');\n\t  document.getElementById(\"mute\").classList.remove('hidden');\n\t}\n\t\n\tfunction onPlayerStateChange() {\n\t  console.log(\"my state changed\");\n\t}\n\t\n\tdocument.getElementById(\"mute\").addEventListener('click', function(event) {\n\t  \n\t\n\t  if (player.isMuted()) {\n\t\tplayer.unMute();\n\t\tdocument.getElementById(\"mute\").classList.add('unmuted');\n\t  } else {\n\t\tplayer.mute();\n\t\tdocument.getElementById(\"mute\").classList.remove('unmuted');\n\t  }\n\t});\n\t\n<\/script>\n<style>\n\t.video-section {\n\theight: 100vh;\n\twidth: 100%;\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.video-section iframe {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\twidth: 100vw;\n\theight: 100vh;\n\ttransform: translate(-50%, -50%);\n\tmargin-top: -80px;\n}\n\n.video-section:after {\n\tcontent: '';\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 1;\n}\n\n@media (min-aspect-ratio: 16\/9) {\n\t.video-section iframe {\n\t\theight: 56.25vw;\n\t}\n}\n@media (max-aspect-ratio: 16\/9) {\n\t.video-section iframe {\n\t\twidth: 177.78vh;\n\t}\n}\n\n@media screen and (max-width: 991px) {\n.video-section:after  {\ndisplay: none;\n}\n}\n\n@media screen and (min-width: 768px) {\n\t.video-section .mute-video {\n\t\tbottom: 330px !important;\n\t}\n}\n\n#placeholder-video {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.video-section .mute-video {\n\tpadding: 0px;\n\theight: 30px;\n\twidth: 30px;\n\tposition: absolute;\n\tright: 30px;\n\tbottom: 30px;\n\tbackground-color: transparent;\n\tborder: none;\n\tbackground-image: url(https:\/\/www.tkdesign.it\/wp-content\/themes\/tk\/icons\/mute.svg);\n\tbackground-size: contain;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tz-index: 9;\n}\n\n.video-section .mute-video.unmuted {\n\tbackground-image: url(https:\/\/www.tkdesign.it\/wp-content\/themes\/tk\/icons\/unmute.svg);\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3706","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/pages\/3706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/comments?post=3706"}],"version-history":[{"count":57,"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/pages\/3706\/revisions"}],"predecessor-version":[{"id":6256,"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/pages\/3706\/revisions\/6256"}],"wp:attachment":[{"href":"https:\/\/www.tkdesign.it\/en\/wp-json\/wp\/v2\/media?parent=3706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}