{"id":2157,"date":"2026-06-04T21:53:02","date_gmt":"2026-06-04T21:53:02","guid":{"rendered":"https:\/\/myy-tech.com\/?page_id=2157"},"modified":"2026-07-09T22:23:09","modified_gmt":"2026-07-09T22:23:09","slug":"videos-copy","status":"publish","type":"page","link":"https:\/\/myy-tech.com\/es\/videos-copy\/","title":{"rendered":"VIDEO LIBRARY"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2157\" class=\"elementor elementor-2157\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a20beb e-flex e-con-boxed e-con e-parent\" data-id=\"6a20beb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17425a7 elementor-widget elementor-widget-html\" data-id=\"17425a7\" 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<!-- =====================================================================\n     MY-TECH \u2014 Click-to-Play Video Gallery\n     Paste this whole block into an Elementor \"HTML\" widget,\n     or into a WPCode \"HTML Snippet\" set to run on the Videos page.\n\n     TO ADD \/ EDIT VIDEOS: edit the VIDEOS array near the bottom.\n     Each entry needs:  src (the .mp4 URL), poster (thumbnail image URL),\n                        title, and desc (short explanation).\n     Nothing downloads until a visitor clicks a video.\n     ===================================================================== -->\n\n<div id=\"myt-videos\">\n\n  <div class=\"myt-vid-intro\">\n    <h2>Video Library<\/h2>\n    <p>Browse our videos below. Click any thumbnail to play.<\/p>\n  <\/div>\n\n  <div class=\"myt-vid-grid\" id=\"myt-vid-grid\"><\/div>\n\n<\/div>\n\n<style>\n#myt-videos { max-width: 1100px; margin: 0 auto; }\n\n.myt-vid-intro { text-align: center; margin-bottom: 32px; }\n.myt-vid-intro h2 {\n  font-size: 28px; font-weight: 700; color: #1a2332; margin: 0 0 8px;\n  letter-spacing: -0.01em;\n}\n.myt-vid-intro p { font-size: 16px; color: #5a6472; margin: 0; }\n\n.myt-vid-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  gap: 24px;\n}\n\n.myt-vid-card {\n  background: #fff;\n  border: 1px solid #e3e7ed;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(26,35,50,.06);\n  transition: transform .18s ease, box-shadow .18s ease;\n  display: flex; flex-direction: column;\n}\n.myt-vid-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(26,35,50,.12);\n}\n\n\/* 16:9 media area *\/\n.myt-vid-media {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  background: #1a2332;\n  cursor: pointer;\n}\n.myt-vid-media img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.myt-vid-media video {\n  width: 100%; height: 100%; display: block; background: #000;\n}\n\n\/* dark gradient + play button overlay *\/\n.myt-vid-overlay {\n  position: absolute; inset: 0;\n  display: flex; align-items: center; justify-content: center;\n  background: linear-gradient(180deg, rgba(26,35,50,.10) 0%, rgba(26,35,50,.45) 100%);\n  transition: background .2s ease;\n}\n.myt-vid-media:hover .myt-vid-overlay { background: linear-gradient(180deg, rgba(26,35,50,.20) 0%, rgba(26,35,50,.55) 100%); }\n\n.myt-vid-play {\n  width: 64px; height: 64px; border-radius: 50%;\n  background: rgba(13,110,253,.92);\n  display: flex; align-items: center; justify-content: center;\n  box-shadow: 0 4px 16px rgba(0,0,0,.3);\n  transition: transform .18s ease, background .18s ease;\n}\n.myt-vid-media:hover .myt-vid-play { transform: scale(1.08); background: #0d6efd; }\n.myt-vid-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }\n\n.myt-vid-body { padding: 16px 18px 20px; }\n.myt-vid-title {\n  font-size: 17px; font-weight: 700; color: #1a2332; margin: 0 0 6px;\n}\n.myt-vid-desc { font-size: 14px; line-height: 1.5; color: #5a6472; margin: 0; }\n\n@media (max-width: 480px) {\n  .myt-vid-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<script>\n(function () {\n  \/* =====================================================================\n     Videos load automatically from the manifest the server builds:\n       \/wp-content\/uploads\/videos\/videos.json\n     To ADD a video:      drop it in the VIDEOS folder, run upload_videos.sh\n     To set titles\/text:  edit videos.json (your edits are preserved)\n     ===================================================================== *\/\n  var BASE = '\/wp-content\/uploads\/videos\/';\n\n  var PLAY_ICON = '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\n  var grid = document.getElementById('myt-vid-grid');\n\n  function esc(s){ return String(s).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;'); }\n\n  function buildCard(v){\n    var card = document.createElement('div');\n    card.className = 'myt-vid-card';\n    card.innerHTML =\n      '<div class=\"myt-vid-media\">' +\n        (v.poster ? '<img decoding=\"async\" src=\"'+esc(v.poster)+'\" alt=\"'+esc(v.title)+'\" loading=\"lazy\">' : '') +\n        '<div class=\"myt-vid-overlay\"><div class=\"myt-vid-play\" role=\"button\" aria-label=\"Play '+esc(v.title)+'\">'+PLAY_ICON+'<\/div><\/div>' +\n      '<\/div>' +\n      '<div class=\"myt-vid-body\">' +\n        '<p class=\"myt-vid-title\">'+esc(v.title)+'<\/p>' +\n        (v.desc ? '<p class=\"myt-vid-desc\">'+esc(v.desc)+'<\/p>' : '') +\n      '<\/div>';\n\n    var media = card.querySelector('.myt-vid-media');\n    media.addEventListener('click', function(){ playInPlace(media, v.src); });\n    return card;\n  }\n\n  function playInPlace(media, src){\n    \/\/ Stop any other video that's currently playing\n    document.querySelectorAll('#myt-vid-grid video').forEach(function(vid){\n      vid.pause();\n    });\n    \/\/ Build the <video> only now \u2014 so nothing downloaded before the click\n    media.innerHTML =\n      '<video controls autoplay playsinline preload=\"auto\">' +\n        '<source src=\"'+esc(src)+'\" type=\"video\/mp4\">' +\n        'Your browser does not support this video.' +\n      '<\/video>';\n    var vid = media.querySelector('video');\n    if (vid && vid.play) { var p = vid.play(); if (p && p.catch) p.catch(function(){}); }\n  }\n\n  fetch(BASE + 'videos.json', {cache: 'no-store'})\n    .then(function(r){ return r.json(); })\n    .then(function(d){\n      var list = (d && d.videos) ? d.videos : [];\n      if (!list.length) {\n        grid.innerHTML = '<p style=\"text-align:center;color:#5a6472;\">No videos available yet.<\/p>';\n        return;\n      }\n      list.forEach(function(v){\n        if (!v.file) return;\n        grid.appendChild(buildCard({\n          title:  v.title || v.file,\n          desc:   v.desc || '',\n          src:    BASE + v.file,\n          poster: v.poster ? (BASE + v.poster) : ''\n        }));\n      });\n    })\n    .catch(function(){\n      grid.innerHTML = '<p style=\"text-align:center;color:#5a6472;\">Unable to load the video list right now.<\/p>';\n    });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Video Library Browse our videos below. Click any thumbnail to play.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/comments?post=2157"}],"version-history":[{"count":3,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2157\/revisions"}],"predecessor-version":[{"id":2165,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2157\/revisions\/2165"}],"wp:attachment":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/media?parent=2157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}