{"id":2,"date":"2025-09-11T13:11:12","date_gmt":"2025-09-11T13:11:12","guid":{"rendered":"https:\/\/elafaki.gr\/?page_id=2"},"modified":"2025-10-09T21:03:27","modified_gmt":"2025-10-09T21:03:27","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/elafaki.gr\/","title":{"rendered":"Home"},"content":{"rendered":"<div id=\"youtube-wrapper\" style=\"display:flex;max-width:1100px;margin:auto;gap:20px;font-family:sans-serif;\">\n  <!-- Player -->\n  <div style=\"flex:2;\">\n    <div style=\"position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;\">\n      <iframe \n        id=\"yt-player\"\n        src=\"\"\n        frameborder=\"0\"\n        allowfullscreen\n        style=\"position:absolute;top:0;left:0;width:100%;height:100%;\">\n      <\/iframe>\n    <\/div>\n  <\/div>\n\n  <!-- Playlist -->\n  <div id=\"playlist-container\" \n       style=\"flex:1;max-height:450px;overflow-y:auto;border-left:1px solid #ccc;padding-left:10px;\">\n    <div id=\"playlist-loading\" style=\"text-align:center;color:#777;margin-top:50%;\">Loading playlist&#8230;<\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const API_KEY = \"AIzaSyDKf8pFGDFxuPp48CXaxQHtQMOKgdtrL-o\"; \/\/ \ud83d\udd11 Your YouTube Data API key\n  const PLAYLIST_ID = \"PLiHYB0fWtbQqpAVODilmbMWRl1P2zY38x\"; \/\/ \ud83c\udf9e\ufe0f Your playlist ID\n  const player = document.getElementById(\"yt-player\");\n  const container = document.getElementById(\"playlist-container\");\n\n  async function loadPlaylist() {\n    const res = await fetch(\n      `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&maxResults=50&playlistId=${PLAYLIST_ID}&key=${API_KEY}`\n    );\n    const data = await res.json();\n\n    container.innerHTML = \"\"; \/\/ clear \"loading\"\n\n    data.items.forEach((item, index) => {\n      const vid = item.snippet.resourceId.videoId;\n      const thumb = item.snippet.thumbnails.medium.url;\n      const title = item.snippet.title;\n      const channel = item.snippet.videoOwnerChannelTitle || \"\";\n      \n      const div = document.createElement(\"div\");\n      div.className = \"playlist-item\";\n      div.dataset.id = vid;\n      div.style.cssText = `\n        display:flex;\n        cursor:pointer;\n        gap:10px;\n        margin-bottom:10px;\n        align-items:flex-start;\n        opacity:${index === 0 ? 1 : 0.7};\n        transition:opacity .2s;\n      `;\n      div.innerHTML = `\n        <img decoding=\"async\" src=\"${thumb}\" style=\"width:120px;height:67px;border-radius:6px;flex-shrink:0;\">\n        <div>\n          <div style=\"font-weight:600;font-size:14px;line-height:1.3;\">${title}<\/div>\n          <div style=\"font-size:12px;color:#666;margin-top:3px;\">${channel}<\/div>\n        <\/div>\n      `;\n      container.appendChild(div);\n\n      div.addEventListener(\"click\", () => {\n        player.src = `https:\/\/www.youtube.com\/embed\/${vid}?autoplay=1`;\n        document.querySelectorAll(\".playlist-item\").forEach(i => (i.style.opacity = 0.7));\n        div.style.opacity = 1;\n      });\n\n      \/\/ Set first video to player\n      if (index === 0) {\n        player.src = `https:\/\/www.youtube.com\/embed\/${vid}`;\n      }\n    });\n  }\n\n  loadPlaylist();\n<\/script>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-accent-3-color has-text-color has-link-color wp-elements-a672cb152b4e9f26e72234816d5c64b3\">\u03a4\u03bf website \u03b5\u03af\u03bd\u03b1\u03b9 \u03c5\u03c0\u03cc \u03ba\u03b1\u03c4\u03b1\u03c3\u03ba\u03b5\u03c5\u03ae<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Loading playlist&#8230; \u03a4\u03bf website \u03b5\u03af\u03bd\u03b1\u03b9 \u03c5\u03c0\u03cc \u03ba\u03b1\u03c4\u03b1\u03c3\u03ba\u03b5\u03c5\u03ae<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elafaki.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":9,"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/elafaki.gr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/elafaki.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}