1

He integrado el complemento https://github.com/pupunzi/jquery.mb.YTPlayer, siguiendo los ejemplos de documentación y no he podido iniciar el video automáticamente, el usuario debe hacer clic para reproducirlo.

Hay una manera de simular este clic, o alguna solución para que el video comience a cargarse sin ninguna acción del usuario.

Full code: https://jsfiddle.net/py7bkox3/

HTML

<div id="video"></div>
<div id="ctn">
  <h1>TITLE EXAMPLE</h1>
</div>

Javascript:

// When the document is ready
$(document).ready(function(){

  // Initialize YouTube player
  $("#video").YTPlayer({
    // URL of the YouTube video
    videoURL:'https://youtu.be/BsekcY04xvQ',
    // If you want it as background of your website
    // or of an element e.g #elementId
    containment: "#ctn",
    autoplay: true,
    controls: 0,
    mute: true,
    startAt: 0,
    opacity: 1,
    // Hide YouTube Controls
    showControls: false,
    onReady: function(){
    },
    onError: function(err){
      console.log("An error ocurred", err);
    }
  });
});

CSS

#ctn {
  display: block;
  margin: 0;
  padding: 250px 0 !important;
  width: 100%;
}

1 respuesta 1

1

En la pagina de la api de youtube https://developers.google.com/youtube/iframe_api_reference?hl=es hay un ejemplo que puedes adaptar para poner un video de fondo.

Así se veria con el video de tu pregunta:

<!DOCTYPE html>
<html>
    <body>

        <style type="text/css">

            #ctn {
                position: absolute;
                display: block;
                margin: 0;
                padding: 250px 0 !important;
                width: 100%;
            }
            #player{
                width: 100%;
                height: 500px;
            }

        </style>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
            <div id="ctn">
                <h1>TITLE EXAMPLE</h1>
            </div>
            <div id="player"></div>


            <script>
            // 2. This code loads the IFrame Player API code asynchronously.
            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // 3. This function creates an <iframe> (and YouTube player)
            //    after the API code downloads.
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    videoId: 'BsekcY04xvQ',
                    playerVars:{
                        autoplay: 1,
                        controls: 0,
                        rel: 0,
                        fs: 0,
                        mute: 1,
                        showinfo: 0
                    },
                });
            }

        </script>
    </body>
</html>

Puedes probar este código en tu local para ver como funciona.

Para la configuración del video debes pasarle este objeto para habilitar la reproduccón automatica y otras opciones como no mostrar los botones, silenciar el video, etc.

playerVars:{
  autoplay: 1,
  controls: 0,
  rel: 0,
  fs: 0,
  mute: 1,
  showinfo: 0
},

Puedes ver la lista de parametros en este link:

https://developers.google.com/youtube/player_parameters#Parameters

con eso ya puedes reproducir automaticamente el video de fondo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.