{"id":436,"date":"2025-06-23T02:12:20","date_gmt":"2025-06-23T06:12:20","guid":{"rendered":"https:\/\/mortenphoto.com\/?page_id=436"},"modified":"2026-08-15T00:26:46","modified_gmt":"2026-08-15T04:26:46","slug":"videos-2","status":"publish","type":"page","link":"https:\/\/mortenphoto.com\/?page_id=436","title":{"rendered":"Videos 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"436\" class=\"elementor elementor-436\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a09786 e-flex e-con-boxed e-con e-parent\" data-id=\"4a09786\" 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-5d77561 elementor-widget elementor-widget-image\" data-id=\"5d77561\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"302\" src=\"https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-1024x302.jpg\" class=\"attachment-large size-large wp-image-270\" alt=\"\" srcset=\"https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-1024x302.jpg 1024w, https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-300x88.jpg 300w, https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-768x226.jpg 768w, https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-512x151.jpg 512w, https:\/\/mortenphoto.com\/wp-content\/uploads\/2019\/09\/playa2-1280x377.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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<div class=\"elementor-element elementor-element-a66b234 e-flex e-con-boxed e-con e-parent\" data-id=\"a66b234\" 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-d9f70bc elementor-widget elementor-widget-html\" data-id=\"d9f70bc\" 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<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  \n  .mosaic-container {\n    background: #ffffff;\n    padding: 24px;\n    border-radius: 16px;\n    min-height: 600px;\n  }\n  \n  .mosaic-header {\n    margin-bottom: 32px;\n  }\n  \n  .mosaic-title {\n    font-size: 28px;\n    font-weight: 700;\n    color: #000;\n    margin-bottom: 8px;\n    letter-spacing: -0.5px;\n  }\n  \n  .mosaic-subtitle {\n    font-size: 14px;\n    color: #666666;\n  }\n  \n  .gallery-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n  \n  .video-card {\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  \n  .video-card:hover {\n    transform: translateY(-8px);\n  }\n  \n  .video-tile {\n    position: relative;\n    aspect-ratio: 16\/9;\n    border-radius: 12px;\n    overflow: hidden;\n    background: #f5f5f5;\n    border: 1px solid #e0e0e0;\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  \n  .video-card:hover .video-tile {\n    border-color: #d32f2f;\n    box-shadow: 0 12px 40px rgba(211, 47, 47, 0.15), 0 0 20px rgba(211, 47, 47, 0.08);\n  }\n  \n  .tile-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    background: linear-gradient(135deg, #f0f0f0 0%, #e5e5e5 100%);\n    transition: transform 0.4s ease;\n  }\n  \n  .video-card:hover .tile-image {\n    transform: scale(1.05);\n  }\n  \n  .tile-overlay {\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.3);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }\n  \n  .video-card:hover .tile-overlay {\n    opacity: 1;\n  }\n  \n  .play-button {\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background: rgba(211, 47, 47, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.3);\n    transition: all 0.3s ease;\n  }\n  \n  .video-card:hover .play-button {\n    background: #d32f2f;\n    transform: scale(1.15);\n  }\n  \n  .play-icon {\n    width: 0;\n    height: 0;\n    border-left: 16px solid white;\n    border-top: 10px solid transparent;\n    border-bottom: 10px solid transparent;\n    margin-left: 4px;\n  }\n  \n  .tile-info {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 12px 14px;\n    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));\n    transform: translateY(4px);\n    opacity: 0;\n    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  \n  .video-card:hover .tile-info {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  \n  .tile-number {\n    font-size: 11px;\n    color: #d32f2f;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    margin-bottom: 4px;\n  }\n  \n  .tile-title {\n    font-size: 13px;\n    color: #fff;\n    font-weight: 600;\n    line-height: 1.3;\n    white-space: normal;\n  }\n  \n  .tile-subtitle {\n    font-size: 11px;\n    color: #cccccc;\n    margin-top: 2px;\n  }\n  \n  .player-modal {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.95);\n    display: none;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    padding: 20px;\n    backdrop-filter: blur(4px);\n  }\n  \n  .player-modal.active {\n    display: flex;\n  }\n  \n  .modal-content {\n    position: relative;\n    width: 100%;\n    max-width: 1000px;\n    aspect-ratio: 16\/9;\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);\n    animation: modalOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n    border: 2px solid #d32f2f;\n  }\n  \n  @keyframes modalOpen {\n    from {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n  \n  .modal-player {\n    width: 100%;\n    height: 100%;\n  }\n  \n  .modal-player iframe,\n  .modal-player video {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n  \n  .modal-close {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    width: 40px;\n    height: 40px;\n    background: rgba(211, 47, 47, 0.9);\n    border: 1px solid #d32f2f;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n    font-size: 20px;\n    transition: all 0.3s;\n    z-index: 1001;\n    font-weight: bold;\n  }\n  \n  .modal-close:hover {\n    background: #d32f2f;\n    transform: scale(1.1);\n  }\n  \n  .modal-info {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 20px 24px;\n    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.95));\n    color: #fff;\n    z-index: 1001;\n  }\n  \n  .modal-title {\n    font-size: 20px;\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n  \n  .modal-subtitle {\n    font-size: 14px;\n    color: #cccccc;\n  }\n  \n  @media (max-width: 768px) {\n    .mosaic-container {\n      padding: 16px;\n    }\n    \n    .mosaic-title {\n      font-size: 24px;\n    }\n    \n    .gallery-grid {\n      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n      gap: 12px;\n    }\n    \n    .modal-content {\n      aspect-ratio: auto;\n      max-height: 70vh;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .gallery-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 10px;\n    }\n  }\n<\/style>\n\n<div class=\"mosaic-container\">\n  <div class=\"mosaic-header\">\n    <div class=\"mosaic-title\">Videos<\/div>\n    <div class=\"mosaic-subtitle\">Documental - Corporativo - Testimonial<\/div>\n  <\/div>\n  \n  <div class=\"gallery-grid\" id=\"galleryGrid\">\n    <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 40px; color: #666;\">\n      Cargando portadas...\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"player-modal\" id=\"playerModal\">\n  <div class=\"modal-content\">\n    <button class=\"modal-close\" onclick=\"closePlayer()\">\u2715<\/button>\n    <div class=\"modal-player\" id=\"modalPlayer\"><\/div>\n    <div class=\"modal-info\">\n      <div class=\"modal-title\" id=\"modalTitle\"><\/div>\n      <div class=\"modal-subtitle\" id=\"modalSubtitle\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst videos = [\n  { id: 1, title: 'Reel Filmmaker Mortenphoto 2025', subtitle: 'Cinematic highlights', src: 'https:\/\/www.youtube.com\/embed\/8oe40Q1ec0E', type: 'youtube', videoId: '8oe40Q1ec0E' },\n  { id: 2, title: 'Reel Travel 2025', subtitle: 'Journey across continents', src: 'https:\/\/www.youtube.com\/embed\/yJ89GAAztTQ', type: 'youtube', videoId: 'yJ89GAAztTQ' },\n  { id: 3, title: 'Reel Mining 2025', subtitle: 'Industrial storytelling', src: 'https:\/\/www.youtube.com\/embed\/Sf6SVKwmawA', type: 'youtube', videoId: 'Sf6SVKwmawA' },\n  { id: 4, title: 'Ellepot Coffee, Guatemala', subtitle: 'From seed to cup', src: 'https:\/\/mortenphoto.com\/wp-content\/uploads\/2025\/05\/ellepot_coffee_denmark__guatemala___from_the_coffee_belt-1080p.mp4', type: 'video', thumbnail: 'https:\/\/mortenphoto.com\/wp-content\/uploads\/2025\/05\/ellepot_coffee_denmark__guatemala___from_the_coffee_belt-1080p.jpg' },\n  { id: 5, title: 'The Sol y Luna Story, Per\u00fa', subtitle: 'Luxury lodge documentary', src: 'https:\/\/player.vimeo.com\/video\/275748334', type: 'vimeo', videoId: '275748334' },\n  { id: 6, title: 'Hotel Titilaka, Per\u00fa', subtitle: 'Lakeside elegance', src: 'https:\/\/player.vimeo.com\/video\/275747779', type: 'vimeo', videoId: '275747779' },\n  { id: 7, title: 'The Concha y Toro Story', subtitle: 'Google-directed commercial', src: 'https:\/\/player.vimeo.com\/video\/151302340', type: 'vimeo', videoId: '151302340' },\n  { id: 8, title: 'Relais & Ch\u00e2teaux Regional', subtitle: 'Brand video campaign', src: 'https:\/\/player.vimeo.com\/video\/151302340', type: 'vimeo', videoId: '151302340' },\n  { id: 9, title: 'Antarctic Airway, Chile', subtitle: 'Aviation adventure', src: 'https:\/\/player.vimeo.com\/video\/276031885', type: 'vimeo', videoId: '276031885' },\n  { id: 10, title: 'Landed, Rapa Nui', subtitle: 'Easter island exploration', src: 'https:\/\/player.vimeo.com\/video\/273821521', type: 'vimeo', videoId: '273821521' },\n];\n\nasync function fetchVimeoThumbnail(videoId) {\n  try {\n    const response = await fetch(`https:\/\/vimeo.com\/api\/v2\/video\/${videoId}.json`);\n    const data = await response.json();\n    return data[0].thumbnail_large;\n  } catch (error) {\n    console.log(`Error fetching thumbnail for ${videoId}:`, error);\n    return null;\n  }\n}\n\nasync function fetchYouTubeThumbnail(videoId) {\n  return `https:\/\/img.youtube.com\/vi\/${videoId}\/maxresdefault.jpg`;\n}\n\nasync function renderGallery() {\n  const grid = document.getElementById('galleryGrid');\n  grid.innerHTML = '';\n  \n  for (const [index, video] of videos.entries()) {\n    let thumbnail;\n    \n    if (video.type === 'youtube') {\n      thumbnail = await fetchYouTubeThumbnail(video.videoId);\n    } else if (video.type === 'vimeo') {\n      thumbnail = await fetchVimeoThumbnail(video.videoId);\n    } else {\n      thumbnail = video.thumbnail;\n    }\n    \n    const cardHTML = `\n      <div class=\"video-card\" onclick=\"playVideo(${index})\">\n        <div class=\"video-tile\">\n          <img decoding=\"async\" class=\"tile-image\" src=\"${thumbnail}\" alt=\"${video.title}\" onerror=\"this.src='data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 1920 1080%22><rect fill=%22%23e5e5e5%22 width=%221920%22 height=%221080%22\/><text x=%2250%25%22 y=%2250%25%22 font-size=%22100%22 fill=%22%23999%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>\u25b6<\/text><\/svg>'\" \/>\n          <div class=\"tile-overlay\">\n            <div class=\"play-button\">\n              <div class=\"play-icon\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"tile-info\">\n            <div class=\"tile-number\">${String(index + 1).padStart(2, '0')}<\/div>\n            <div class=\"tile-title\">${video.title}<\/div>\n            <div class=\"tile-subtitle\">${video.subtitle}<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    `;\n    grid.innerHTML += cardHTML;\n  }\n}\n\nfunction playVideo(index) {\n  const video = videos[index];\n  const modal = document.getElementById('playerModal');\n  const modalPlayer = document.getElementById('modalPlayer');\n  \n  document.getElementById('modalTitle').textContent = video.title;\n  document.getElementById('modalSubtitle').textContent = video.subtitle;\n  \n  if (video.type === 'video') {\n    modalPlayer.innerHTML = `<video controls style=\"width: 100%; height: 100%; object-fit: cover;\"><source src=\"${video.src}\" type=\"video\/mp4\"><\/video>`;\n  } else {\n    modalPlayer.innerHTML = `<iframe src=\"${video.src}?autoplay=0\" frameborder=\"0\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\" allowfullscreen><\/iframe>`;\n  }\n  \n  modal.classList.add('active');\n  document.body.style.overflow = 'hidden';\n}\n\nfunction closePlayer() {\n  const modal = document.getElementById('playerModal');\n  const modalPlayer = document.getElementById('modalPlayer');\n  \n  const videoElement = modalPlayer.querySelector('video');\n  if (videoElement) {\n    videoElement.pause();\n    videoElement.currentTime = 0;\n  }\n  \n  const iframeElement = modalPlayer.querySelector('iframe');\n  if (iframeElement) {\n    iframeElement.src = 'about:blank';\n  }\n  \n  modalPlayer.innerHTML = '';\n  modal.classList.remove('active');\n  document.body.style.overflow = 'auto';\n}\n\ndocument.getElementById('playerModal').addEventListener('click', function(e) {\n  if (e.target === this) closePlayer();\n});\n\ndocument.addEventListener('keydown', function(e) {\n  if (e.key === 'Escape') closePlayer();\n});\n\nrenderGallery();\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Videos Documental &#8211; Corporativo &#8211; Testimonial Cargando portadas&#8230; \u2715<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-436","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/pages\/436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mortenphoto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=436"}],"version-history":[{"count":35,"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/pages\/436\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/mortenphoto.com\/index.php?rest_route=\/wp\/v2\/pages\/436\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/mortenphoto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}