Youtube Javascript API – deshabilitar videos relacionados

Correcto, esto parece estar mal documentado o no puedo verlo en la documentación. Básicamente no quiero videos relacionados (?rel=0) utilizando la API de JavaScript.

$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
    height: '550',
    width: '840',
    videoId: $vidId
});

es lo que tengo puesto.

También he probado:

$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
    height: '550',
    width: '840',
    videoId: $vidId + '?rel=0',
    rel : 0
});

sin suerte ¿Alguien sabe de una opción que se puede agregar (probado rel : 0 sin suerte)

“rel” es un parámetro del jugador, como se especifica aquí:

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

Para agregar parámetros de jugador a los jugadores de iframe, debe especificar la propiedad playerVars del segundo argumento del constructor (al momento de escribir esto está documentado aquíy en el Página de documentación de la API de IFrame)

p.ej

new YT.Player('playerid', {
    height: '550',
    width: '840',
    videoID: 'video_id',
    playerVars: {rel: 0, showinfo: 0, ecver: 2}
});

El comportamiento del parámetro rel player ha cambiado.

De la documentación,

El comportamiento del parámetro rel cambiará a partir del 25 de septiembre de 2018. El efecto del cambio es que no podrá deshabilitar videos relacionados. Sin embargo, tendrá la opción de especificar que los videos relacionados que se muestran en el reproductor sean del mismo canal que el video que se acaba de reproducir.

Por lo tanto, ya no es posible deshabilitar videos relacionados. En cambio playerVars: {rel:0} cambiará el comportamiento del jugador y muestra sugerencias del canal especificado.

Obtiene videos relacionados en dos lugares: al final del video con la cuadrícula y en la parte inferior del video mientras está en pausa. Descubrí una manera de eliminarlos al final y hacer que los que están en la parte inferior sean al menos tolerables para la mayoría de las empresas.

1. Eliminar videos relacionados al final de un video

API de IFrame Player: Eventos

Para evitar mostrar videos relacionados al final de un video, simplemente detuve el video para que volviera a mostrar la miniatura y el botón de reproducción:

var player = new YT.Player('player', {
   height: '390',
   width: '640',
   events: {
      'onStateChange': function(event){
         switch(event.data){
            // Stop the video on ending so recommended videos don't pop up
            case 0:     // ended
               player.stopVideo();
               break;
            case -1:    // unstarted
            case 1:     // playing
            case 2:     // paused
            case 3:     // buffering
            case 5:     // video cued
            default:
               break;
         }
      }
   }
});

También podrías reemplazar player.stopVideo(); con cualquier otro código que desee ejecutar.

2. Hacer videos relacionados en la parte inferior de un video solo muestra tus videos

API de IFrame Player: reproductores integrados de YouTube y parámetros del reproductor

rel=0 ya no evita mostrar videos relacionados; ahora, seguirá mostrando videos relacionados, pero al menos solo serán de tu canal. Esto cambió en algún momento alrededor del 25 de septiembre de 2018 (documentación).

Configurando playerVars en YT.Player, al menos podemos hacer que los videos relacionados solo muestren los videos de nuestro canal. La documentación no es clara que usted tiene que tener playerVars configurado como un objeto, pero puede configurarlo así:

var player = new YT.Player('player', {
   ...
   playerVars:{
      rel:              0
      modestbranding:   1,       // If you're trying to remove branding I figure this is helpful to mention as well; removes the YouTube logo from the bottom controls of the player
      // color:         'white', // Can't have this and modestbranding active simultaneously (just a note in case you run into this)
   },
   ...
});

2A. Forma potencial de eliminar videos relacionados de la parte inferior

Puedo investigar más si tengo tiempo, pero aquí es donde puede estar la respuesta:

Podemos acceder fácilmente al objeto iframe pero no podemos hacer nada con él: API de IFrame Player: Acceso y modificación de nodos DOM. Parece que debido a que estaríamos editando un iframe de YouTube, existen problemas de seguridad (independientemente de lo que realmente estaríamos haciendo). Idealmente, podría eliminar el texto “Más videos” con player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove()pero cuando corro player.getIframe().contentWindow.document me sale un error SecurityError: Permission denied to access property "document" on cross-origin object.

Pero playerVars también tiene un origin valor que puede permitirnos acceder al objeto del iframe de todos modos:

var player = new YT.Player('player', {
   ...
   playerVars:{
      origin:           'https://mywebsite.com'
   },
   ...
});

No funciona con localhost, pero eso puede ser cosa de Chromium y Firefox. Quizás esta sea una opción legítima en un sitio en vivo; Actualizaré esta publicación cuando/si lo intento para hacerle saber si tengo éxito.

La solución aceptada no funcionaba para mí. Lo que funciona es:

1) Poner el iframe en html que incluye el parámetro rel

<iframe id="youtube-video" width="560" height="315" 
 src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&rel=0&modestbranding=1" 
 frameborder="0" enablejsapi="1" allowfullscreen></iframe>

2) Usando la API de javascript para adjuntar a ese jugador existente

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('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
    console.log("ready");
}

function onPlayerStateChange(event) {
    console.log("state changed");
}

violín de demostración: http://jsfiddle.net/bf7zQ/195/

Si está utilizando SWFObject, simplemente necesita hacer algo como esto:

function loadVideo() {
        var params = { allowScriptAccess: "always" }
            , atts = { id: "myvideo" }
        ;
//NOTE THE END OF THE BELOW LINE vvvvvv
        swfobject.embedSWF("https://www.youtube.com/v/?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
         , "videoplaceholderid"
         , "768", "432", "8", null, null, params, atts);
    }

Solo agrega rel=0 hasta el final de su URL.

No es necesario codificar a través de la API, ahora se puede hacer fácilmente

Botón de inserción de YouTube -> Mostrar más -> marque la opción ‘Mostrar videos sugeridos cuando finalice el video’

Aquí hay una solución rápida:

setInterval(function(){
    if($('iframe').length > 0){
        $('iframe').each(function(){
            if($(this).hasClass('gotYou')){
                //do nothing
            }else{
                var getMySrc = $(this).attr('src');
                var newSrc = getMySrc.split('?');
                console.log(newSrc);
                var freshURL = newSrc[0]+'?rel=0&'+newSrc[1];
                console.log(freshURL);
                $(this).addClass('gotYou');
                $(this).attr('src', freshURL );         
            }
        });
    }
}, 1);

Lo que hace es buscar el iframe en tu documento. Si encuentra iframe, toma el src del iframe, encuentra el ? marca y luego reemplaza ? por ?rel=0& . Aquí el objetivo es salir rel=0