web-dev-qa-db-fra.com

Est-il possible de masquer le gros bouton de lecture rouge de YouTube avec un paramètre?

Exemple rapide du code que j'utilise actuellement pour créer mon iframe YouTube:

player = new YT.Player('[PLAYER ID]', {
  height: '300',
  width: '480',
  videoId: '[VIDEO ID]',
  playerVars: { 'controls': 0, 'showinfo': 0 },
});

Jusqu'à présent, tout fonctionne très bien, il charge correctement la vidéo sans contrôles ni bande d'informations et je joue la vidéo "manuellement" en utilisant javascript.

Le problème est qu'il n'y a plus besoin du gros bouton rouge de lecture qui s'affiche momentanément au début de la vidéo.

enter image description here

Existe-t-il un moyen de m'en débarrasser? J'ai parcouru la documentation et je ne trouve pas de paramètre approprié qui me permettrait de le cacher.

javascripthtmlyoutubeyoutube-javascript-api
15
user1017882

J'ai trouvé que ce n'était pas possible. Donc, la seule façon de masquer le bouton Lecture est de placer l'image vidéo au-dessus de la vidéo qui peut être récupérée à partir de YouTube comme suit. Chaque vidéo YouTube contient 4 images générées. Ils sont formatés comme suit:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

Mais une fois que vous avez ajouté la superposition, cliquer sur l'écran au lieu du contrôle ne lira pas la vidéo. Pour ce faire, ajoutez le jQuery suivant qui lit la vidéo

jQuery('#overlay').click(function(){
  jQuery(this).hide();
  jQuery('#youtube_id').get(0).playVideo();
});
5
Supun Silva

Chaque vidéo YouTube contient 4 images générées. Ils sont formatés comme suit:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

La première de la liste est une image en taille réelle et d'autres sont des images miniatures. L'image miniature par défaut (c'est-à-dire l'une des 1.jpg, 2.jpg, 3.jpg) est:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

Pour la version haute qualité de la vignette, utilisez une URL similaire à celle-ci:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

Il existe également une version de qualité moyenne de la vignette, utilisant une URL similaire à celle du siège:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

Pour la version en définition standard de la vignette, utilisez une URL similaire à celle-ci:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

Pour la version à résolution maximale de la vignette, utilisez une URL similaire à celle-ci:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

Toutes les URL ci-dessus sont également disponibles via https. Changez simplement http en https dans l'une des URL ci-dessus. De plus, le nom d'hôte légèrement plus court i3.ytimg.com fonctionne à la place de img.youtube.com dans l'exemple d'URL ci-dessus.

Alternativement, vous pouvez utiliser YouTube Data API (v3) ou l'ancienne YouTube API v2. pour obtenir des images miniatures.

1
Supun Silva