TransWikia.com

Reproducir vídeo youtube solo cuando este este en el foco utilizando la YouTube API de IFrame

Stack Overflow en español Asked by Cristhián Monasterio on December 5, 2020

Estimados

Estoy intentando hacer que un vídeo youtube se reproduzca solo cuando se tiene el foco en este, para entender el contexto este vídeo se puede ver cuando se va bajando en la página, no se ve al principio ya que la página contiene gran contenido hasta antes de que este pueda verse, estoy utilizando una biblioteca jQuery.YoutubeBackground esta utiliza las mismas funciones que la API de youtube, es más se le pueden agregar los eventos de la API sin problemas ya que las incluye en un listado de parametros a pasar para crear el objeto de Youtube, ¿Alguna sugerencia de como hacerlo?

Saludos

One Answer

Échale un ojo a este código a ver si te sirve, pienso que no te hace falta nada de la biblioteca YoutubeBackground para hacer que cuando pase sobre el video se reproduzca y pare cuando se salga, he utilizado la api de youtube y mouseover y mouseout, aqui no te funcionara el codigo de abajo, pruebalo en un fichero en tu ordenador, eso si el script tienes que ponerlo debajo del iframe para que funcione, saludos espero que te sirva de todos modos revisa la documentación de la api de youtube te dejo el link: Api Youtube

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/player_api"></script>

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>

<script type="text/javascript"> 

  var player;

	function onYouTubeIframeAPIReady() {
	  
	  	player = new YT.Player('player');

	}

	$(document).on('mouseover', '#player', function() {

	  player.playVideo();

	});

	$(document).on('mouseout', '#player', function() {

	  player.pauseVideo();

	});  

</script>

Answered by jruano on December 5, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP