{"id":8538,"date":"2025-09-03T14:15:45","date_gmt":"2025-09-03T14:15:45","guid":{"rendered":"https:\/\/www.depark.com\/?page_id=8538"},"modified":"2025-11-03T11:14:46","modified_gmt":"2025-11-03T11:14:46","slug":"deportaj-vlog","status":"publish","type":"page","link":"http:\/\/www.depark.com\/en\/deportaj-vlog\/","title":{"rendered":"Deportaj Vlog"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n DEPARK \/ DETTO - Video Listesi<\/title>\r\n <style>\r\n :root {\r\n --maxw: 1600px;\r\n --gap: 16px;\r\n --radius: 12px;\r\n --shadow: 0 8px 24px rgba(0,0,0,.08);\r\n --border: 1px solid rgba(0,0,0,.08);\r\n }\r\n\r\n body {\r\n font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n margin: 0;\r\n background: #fafafa;\r\n color: #111;\r\n }\r\n\r\n .wrap { max-width: var(--maxw); margin: 24px auto; padding: 0 12px; }\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr;\r\n gap: var(--gap);\r\n }\r\n @media (max-width: 900px) {\r\n .grid { grid-template-columns: 1fr; }\r\n }\r\n\r\n \/* Ana video oynat\u0131c\u0131 *\/\r\n .player {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9; \/* \u2705 Modern oran koruma *\/\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n box-shadow: var(--shadow);\r\n background: #000;\r\n }\r\n\r\n .player iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n }\r\n\r\n \/* Liste k\u0131sm\u0131 *\/\r\n .list {\r\n display: grid;\r\n gap: 10px;\r\n align-content: start;\r\n max-height: 100%;\r\n }\r\n\r\n .item {\r\n display: grid;\r\n grid-template-columns: 140px 1fr;\r\n gap: 10px;\r\n align-items: center;\r\n padding: 8px;\r\n border-radius: 10px;\r\n border: var(--border);\r\n background: #fff;\r\n cursor: pointer;\r\n transition: transform .12s ease, box-shadow .12s ease, background .12s ease;\r\n }\r\n .item:hover { transform: translateY(-1px); box-shadow: var(--shadow); }\r\n .item.active { outline: 2px solid #005EB8; background: #f4f9ff; }\r\n\r\n \/* K\u00fc\u00e7\u00fck \u00f6nizleme resimleri *\/\r\n .thumb {\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9; \/* \u2705 K\u00fc\u00e7\u00fck resim de oranl\u0131 *\/\r\n object-fit: cover;\r\n border-radius: 8px;\r\n background: #ddd;\r\n }\r\n\r\n .meta { display: flex; flex-direction: column; gap: 4px; }\r\n .title { font-size: 14.5px; font-weight: 600; line-height: 1.25; }\r\n .sub { font-size: 12px; color: #666; }\r\n\r\n .bar {\r\n display:flex; justify-content: space-between; align-items:center; margin: 6px 0 14px;\r\n }\r\n .brand { font-weight: 700; letter-spacing:.2px; }\r\n .ctrls { display:flex; gap:10px; align-items:center; }\r\n .toggle {\r\n display:inline-flex; gap:8px; align-items:center; font-size:13px; color:#333; user-select:none;\r\n }\r\n .small { font-size: 12px; color:#666; margin-top:8px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"bar\">\r\n <div class=\"brand\">DEPARK \/ DETTO \u2013 Video<\/div>\r\n <div class=\"ctrls\">\r\n <label class=\"toggle\"><input id=\"autoplayToggle\" type=\"checkbox\" \/>Otomatik oynat<\/label>\r\n <label class=\"toggle\"><input id=\"controlsToggle\" type=\"checkbox\" checked \/>Kontrolleri g\u00f6ster<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid\" id=\"videoApp\">\r\n <div class=\"player\">\r\n <!-- \ud83d\udd39 Varsay\u0131lan video (1. video aktif) -->\r\n <iframe\r\n id=\"playerFrame\"\r\n src=\"https:\/\/www.youtube.com\/embed\/9XUNAgnzK68?rel=0&modestbranding=1&showinfo=0&controls=1\"\r\n title=\"DEPARK \/ DETTO - Video\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n referrerpolicy=\"strict-origin-when-cross-origin\"\r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n\r\n <div class=\"list\" id=\"videoList\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"small\">Varsay\u0131lan aktif video: <b>DEPORTAJ - Mage Games<\/b><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const videos = [\r\n { id: \"9XUNAgnzK68\", title: \"DEPORTAJ - Mage Games\" },\r\n { id: \"7qz9GOwqPtM\", title: \"DEPORTAJ - CEVHER DIGITAL SOLUTIONS\" },\r\n { id: \"duxK2fGwOo8\", title: \"DEPORTAJ - BIOP BIOTECH\" },\r\n { id: \"xW4Ijw5Sr54\", title: \"DEPORTAJ - PIA QA\" },\r\n { id: \"YlNP2Ym_R-s\", title: \"DEPORTAJ - HEALYSENSE\" },\r\n { id: \"1r1ohvM9p_c\", title: \"DEPORTAJ - DATAKOD\" },\r\n { id: \"6r7e7yFxrds\", title: \"DEPORTAJ - EXPERILABS\" },\r\n { id: \"TlgTbyiL29o\", title: \"DEPORTAJ - FITED\" },\r\n { id: \"M1I06mW8Ocg\", title: \"DEPORTAJ - ECOSPEND\" },\r\n { id: \"_u0mSNN7oW4\", title: \"DEPORTAJ - AGON BIOTECHNOLOGY\" }\r\n ];\r\n\r\n const listEl = document.getElementById(\"videoList\");\r\n const frameEl = document.getElementById(\"playerFrame\");\r\n const autoplayToggle = document.getElementById(\"autoplayToggle\");\r\n const controlsToggle = document.getElementById(\"controlsToggle\");\r\n\r\n let currentId = \"9XUNAgnzK68\"; \/\/ \u2705 \u0130lk video aktif\r\n\r\n function buildQuery(id) {\r\n const params = new URLSearchParams({\r\n rel: \"0\",\r\n modestbranding: \"1\",\r\n showinfo: \"0\",\r\n controls: controlsToggle.checked ? \"1\" : \"0\",\r\n autoplay: autoplayToggle.checked ? \"1\" : \"0\"\r\n });\r\n return `https:\/\/www.youtube.com\/embed\/${id}?${params.toString()}`;\r\n }\r\n\r\n function renderList() {\r\n listEl.innerHTML = \"\";\r\n videos.forEach((v, idx) => {\r\n const item = document.createElement(\"button\");\r\n item.type = \"button\";\r\n item.className = \"item\" + (v.id === currentId ? \" active\" : \"\");\r\n item.innerHTML = `\r\n <img decoding=\"async\" class=\"thumb\" src=\"https:\/\/img.youtube.com\/vi\/${v.id}\/hqdefault.jpg\" alt=\"\u00d6nizleme\">\r\n <div class=\"meta\">\r\n <div class=\"title\">${v.title}<\/div>\r\n <div class=\"sub\">#${String(idx+1).padStart(2,\"0\")} \u2022 youtube.com<\/div>\r\n <\/div>`;\r\n item.addEventListener(\"click\", () => {\r\n currentId = v.id;\r\n frameEl.src = buildQuery(v.id);\r\n document.querySelectorAll(\".item\").forEach(x => x.classList.remove(\"active\"));\r\n item.classList.add(\"active\");\r\n if (window.innerWidth < 900) {\r\n window.scrollTo({ top: document.querySelector(\".wrap\").offsetTop, behavior: \"smooth\" });\r\n }\r\n });\r\n listEl.appendChild(item);\r\n });\r\n }\r\n\r\n [autoplayToggle, controlsToggle].forEach(el =>\r\n el.addEventListener(\"change\", () => { frameEl.src = buildQuery(currentId); })\r\n );\r\n\r\n renderList();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>DEPARK \/ DETTO – Video Listesi DEPARK \/ DETTO \u2013 Video Otomatik oynat Kontrolleri g\u00f6ster Varsay\u0131lan aktif video: DEPORTAJ – Mage Games<\/p>","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,"pagelayer_contact_templates":[],"_pagelayer_content":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-8538","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/pages\/8538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/comments?post=8538"}],"version-history":[{"count":35,"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/pages\/8538\/revisions"}],"predecessor-version":[{"id":9242,"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/pages\/8538\/revisions\/9242"}],"wp:attachment":[{"href":"http:\/\/www.depark.com\/en\/wp-json\/wp\/v2\/media?parent=8538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}