Smart Scrolling

<div id="custom-embed-player" style="max-width: 600px; margin: auto;">
  <!-- Video Embed (Reemplaza VIDEO_ID con el ID de tu video) -->
  <iframe id="videoFrame" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  
  <!-- Sección de Reflexión -->
  <div id="reflection-section" style="display: none; margin-top: 20px;">
    <p><strong>Reflexión:</strong> ¿Qué te hizo sentir este video?</p>
    <input type="text" id="reflectionInput" placeholder="Comparte tus pensamientos" style="width: 100%; padding: 8px;">
    <button id="reflectionButton" style="margin-top: 10px; padding: 8px 16px;">Enviar</button>
  </div>
</div>

<script>
  // Carga la API de Iframe de YouTube
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('videoFrame', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    // Cuando el video termina, se muestra la sección de reflexión
    if (event.data == YT.PlayerState.ENDED) {
      document.getElementById('reflection-section').style.display = 'block';
    }
  }

  // Acción para el botón de enviar reflexión
  document.getElementById('reflectionButton').addEventListener('click', function() {
    var reflection = document.getElementById('reflectionInput').value;
    alert("Gracias por compartir: " + reflection);
    // Aquí podrías agregar más lógica, por ejemplo, enviar la reflexión a tu servidor o guardarla.
  });
</script>

Selecciona un video de pronunciación en inglés

julio 2025
L M X J V S D
 123456
78910111213
14151617181920
21222324252627
28293031