<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
Reflexión: ¿Qué aprendiste de este video? ¿Cómo puedes aplicar lo aprendido en tu práctica diaria?