web-dev-qa-db-fra.com

Showinfo intégré dans YouTube est obsolète

Nous utilisons une vidéo YouTube sur notre site Web en tant que bannière pour héros.

Cependant, il y a quelques jours, il a commencé à afficher son titre, à regarder plus tard et un bouton de partage. Nous avons pu les cacher en utilisant &showinfo=0 à la fin si l'URL.

J'ai découvert que showinfoest obsolète et que vous ne pouvez donc plus cacher le fait qu'il s'agit d'une vidéo YouTube qui y est diffusée. 

Y at-il un autre paramètre qui pourrait être capable de faire la même chose?

Vous ne pouvez pas le faire avec CSS ou JavaScript car il s'agit d'une iframe.

Toutes les idées sont très appréciées.

METTRE À JOUR:

Toute couche ou masque recouvrant la vidéo n'aide en rien, car les informations indiquent le chargement de la vidéo ou, si vous cliquez en dehors du navigateur, la vidéo se met en pause et les infos s'affichent.

Cacher le haut ~ 60 pixels fonctionne, mais ce n'est pas une bonne solution pour moi.

youtubeyoutube-apiembed
6
Daut

Directement à partir de Afficher les infos

Remarque: Il s'agit d'une annonce de désapprobation pour le paramètre showinfo. De plus, le comportement du paramètre rel est en train de changer. Les titres, les informations sur les chaînes et les vidéos associées constituent une part importante de l'expérience utilisateur de base de YouTube. Ces modifications contribuent à la cohérence de l'expérience de visionnage de YouTube sur différentes plateformes.

Le comportement du paramètre rel change à compter du 25 septembre 2018. Ce changement a pour effet que vous ne pourrez pas désactiver les vidéos associées. Cependant, vous aurez la possibilité de spécifier que les vidéos associées affichées dans le lecteur doivent provenir du même canal que la vidéo qui vient d'être lue.

Il est clairement indiqué que c’est quelque chose qu’ils considèrent comme faisant partie de l’expérience cor youtube. Il n'y a aucune suggestion de solution de contournement ou de nouveau paramètre que vous pourriez envoyer pour archiver les anciens résultats. Ils l'enlèvent. Si vous essayez de le forcer à l'aide de javascript et de css, je dirais presque que vous êtes contre la table des matières, qui stipule que vous n'êtes pas autorisé à modifier cet affichage. Les gens devraient savoir que vous diffusez quelque chose sur YouTube.

7
DaImTo

La solution que je trouve esthétiquement la plus agréable est de poser une vignette haute résolution sur la vidéo et de la masquer en survol. Cela traite également le problème que la prévisualisation youtube est basse résolution et semble bon marché à mon avis. 

Découvrez-le ici: http://jsfiddle.net/d9D9E/1/

Il a fallu écrire du code pour montrer le violon js: /

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-thumbnail:hover{
    display:none;
}
1
moritzfelipe

Eh bien, je viens de le remarquer aussi. Ça craint et gâche l'esthétique. Alors je viens de faire un

header {
    /* remove when YT got its brain back */
    margin-top: -56px;
}

en espérant qu'ils rajouteront à nouveau showinfo=0.

1
J. Bähr

Je cherchais le même problème et la seule solution que j'ai trouvée consiste à définir la vidéo en lecture automatique et à placer un calque transparent sur la boîte youtube.

L'utilisateur ne pourrait pas interagir avec le joueur, mais cela peut être utile dans certaines situations, comme une bannière.

Malheureusement, le code ne semble pas fonctionner correctement sur stackoverflow. J'ajoute également un jsfiddle: http://jsfiddle.net/z3dqpuy0/

.yt-cntainer {
  position: relative;
}
		
.yt-mask {
  position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
<div class="yt-cntainer">
  <iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
  <div class="yt-mask"></div>
</div>

1
al404IT

Ne pas avoir 'rel = 0' est irritant, mais il y a une solution de rechange. Si vous travaillez avec l’API IFrame (par opposition à l’incorporation d’un iframe ex http://youtu.be/?videoIDxxx .. .), Vous pouvez obtenir l’événement pour l’arrêt de la vidéo, cue la vidéo par ID dans le lecteur. Voir https://developers.google.com/youtube/iframe_api_reference#Playback_controls pour une référence au lecteur de base.

 
....

<div id="player1"></div>

<script type="text/javascript">
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('player1', 
        { 
        videoId: 'YourVideoId',
        events: {
            'onStateChange': onPlayerStateChange
             }
        });

    }; // onYOuTubeIframeAPIReady
    		
function onPlayerStateChange(event)
    { 
    // Alt approach //if( event.data  == 0){ location.reload()}
    if( event.data  == 0)
        { player.cueVideoById({videoId:'YourVideoID',
                               suggestedQuality: 'hd720'})
        };
    } 

     </script>

0
msex