Recurso 1
Cultura en Directo.UNAM
UNAM Logo











Código para videos en bloque

Instrucciones

  1. Copiar este código con el botón Copy en la esquina superior derecha

  2. Pegar en un documento. De preferencia un editor de Código como Visual Studio Code.

  3. En el documento abierto, editar las líneas resaltadas 1, 3 y 6. A cada línea corresponde la sustitución de estos valores:

    a) <!– Video 1 –>
    Sustituir 1 por el número de la sesión que corresponda

    b) <div class=”video-overlay”><img class=”video-thumbnail” src=”https://culturaendirecto.z1p.mx/wp-content/uploads/2020/02/leila-guerriero.jpg” alt=”Portadilla” />
    Sustituir https://culturaendirecto.z1p.mx/wp-content/uploads/2020/02/leila-guerriero.jpg por el enlace de la portadilla que corresponda publicada en la biblioteca de medios de WordPress

    c) <div class=”video-frame”><iframe class=”video” src=”https://www.youtube.com/embed/n_k8H3uct1o?controls=1&amp;rel=0″ allowfullscreen=”allowfullscreen”></iframe></div>
    Sustituir n_k8H3uct1o por el ID del video que corresponda

  4. Copiar el nuevo código editado

  5. Pegar en el widget/componente acordeón, en la página de elementor del video en bloque que corresponda

  6. Eliminar las pestañas de sesiones que no se necesiten en el acordeón y repetir estas instrucciones una vez por cada sesión

  7. Publicar la página del video en bloque

				
					<!-- Video 1 -->
<div class="video-container">
<div class="video-overlay"><img decoding="async" class="video-thumbnail" src="https://culturaendirecto.z1p.mx/wp-content/uploads/2020/02/leila-guerriero.jpg" alt="Portadilla" />
<div class="play-button"></div>
</div>
<div class="video-frame"><iframe class="video" src="https://www.youtube.com/embed/n_k8H3uct1o?controls=1&amp;rel=0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<style>
  .video-container {<br />
    position: relative;<br />
    max-width: 100%;<br />
    height: 0;<br />
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */<br />
    overflow: hidden;<br />
  }</p>
<p>  .video-overlay {<br />
    position: absolute;<br />
    top: 0;<br />
    left: 0;<br />
    width: 100%;<br />
    height: 100%;<br />
    cursor: pointer;<br />
    display: inline-block;<br />
  }</p>
<p>  .video-thumbnail {<br />
    width: 100%;<br />
    height: 100%;<br />
    object-fit: cover;<br />
  }</p>
<p>  .play-button {<br />
    position: absolute;<br />
    top: 50%;<br />
    left: 50%;<br />
    transform: translate(-50%, -50%);<br />
    font-size: 100px;<br />
    color: white;<br />
    text-shadow: 1px 0 6px rgba(0, 0, 0, .3);<br />
    opacity: .8;<br />
  }</p>
<p>  .video-frame {<br />
    position: absolute;<br />
    top: 0;<br />
    left: 0;<br />
    width: 100%;<br />
    height: 100%;<br />
    display: none; /* Oculto hasta que se haga clic */<br />
  }</p>
<p>  iframe {<br />
    width: 100%;<br />
    height: 100%;<br />
    border: none;<br />
  }</p>
<p>  /* Ajustes para móviles */<br />
  @media only screen and (max-width: 768px) {<br />
    .play-button {<br />
      font-size: 100px;<br />
      padding: 15px;<br />
    }<br />
  }<br />
</style>

<script>
  document.querySelectorAll('.video-overlay').forEach((overlay, index) => {
    overlay.addEventListener('click', function() {
      const videoFrame = this.nextElementSibling; // Selecciona el contenedor del video
      const iframe = videoFrame.querySelector('iframe'); // Selecciona el iframe dentro del contenedor
      const videoSrc = iframe.src + '&autoplay=1'; // Añade autoplay a la URL del iframe

      // Ocultar la portadilla
      this.style.display = 'none';

      // Mostrar el contenedor del video y cargar el iframe con autoplay
      videoFrame.style.display = 'block';
      iframe.src = videoSrc;
    });
  });
</script>