web-dev-qa-db-fra.com

Incorporer une liste de lecture / vidéo YouTube à l'aide d'un espace réservé pour une image haute résolution

J'essaie d'intégrer une liste de lecture vidéo YouTube à l'aide de la technique suivante fournie par YouTube lui-même:

<iframe src="https://www.youtube.com/embed/videoseries?list=PLCAVPALzt27-IbMJ2bqRwGay9R1EEtC5X" frameborder="0" height="658" width="1170"></iframe>

YouTube nous permet de télécharger un espace réservé pour une image, mais une fois intégré sur notre site Web, il crée un espace réservé extrêmement basse résolution. Y at-il une sorte de solution de rechange pour cela? Si je ne parviens pas à comprendre, je ferai probablement une image fixe liens vers YouTube lui-même. Une fois que la vidéo commence à jouer, tout va bien, mais nous essayons de la garder propre si elle passe dans un espace réservé curseur/héros. Merci.

youtubeembed
3
sparecycle

Quelque chose comme ça ?

Code HTML:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="video">
    <div class="video-box">
      <a class="thumbnail-link">
        <img src="http://i.ytimg.com/vi_webp/67OAp3FW6Dw/maxresdefault.webp" class="video-thumbnail">
        <iframe class="video-frame" width="100%" height="100%" src="https://www.youtube.com/embed/videoseries?list=PLCAVPALzt27-IbMJ2bqRwGay9R1EEtC5X&vq=hd720&showinfo=0&autohide=1&color=white&controls=2&modestbranding=1&theme=light" frameborder="0" allowfullscreen>
        </iframe>
      </a>
    </div>
  </div>



</body>

</html>

Code CSS:

.video{
    margin-bottom:14px;
    width:1170px;
    height:658px;
}
.video-box{
    height:925px;
    width:1646px;
    position:relative;
}

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

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

.thumbnail-link .video-thumbnail{
    display:block;
}

.thumbnail-link:hover .video-thumbnail{
    display:none;
}

Plunker

Vous pouvez toujours obtenir la vignette haute résolution en ajoutant maxresdefault.webp à la fin de votre URL. Exemple :

http://i.ytimg.com/vi_webp/67OAp3FW6Dw/maxresdefault.webp
3
Zulhilmi Zainudin

Chaque vidéo YouTube contient 4 images générées. De manière prévisible, 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

Le premier de la liste est une image en taille réelle et les autres sont des images miniatures. La vignette par défaut (c.-à-d. L'un des 1.jpg, 2.jpg, 3.jpg) est la suivante:

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 QG:

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 sur https. Il suffit de changer 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 remplace la valeur de img.youtube.com dans les exemples d'URL ci-dessus.

<img src="http://img.youtube.com/vi/Q1wb1lS09Sg/maxresdefault.jpg">

démo jsfiddle

3
norcal johnny

Google m'a amené ici lorsque je cherchais de l'aide pour résoudre le même problème de vignette floue. J'ai trouvé cette excellente solution:

Il suffit de remplacer l'ancien sort de la liste de lecture intégrée ...

/embed/videoseries?list=

...avec ça:

/embed&listType=playlist&list=

... et vous obtenez un espace réservé de qualité HD sur votre lecteur de playlist intégré!

Sorts supplémentaires (tels que & rel = 0 & showinfo = 1 & modestbranding = 1 etc.) expliqués à l'adresse suivante: https://developers.google.com/youtube/player_parameters

2
dudebuildingportfolio123