Lite YouTube Embed

DarkLane

•

24 Nov, 2021

326 Vues

•

3 Commentaires

Description Installation Téléchargement

Intégrer YouTube Lite, Rendu plus rapide qu'un éternuement.

Fournissez des vidéos mettant l'accent sur les performances visuelles. Cet élément personnalisé est rendu exactement comme la vraie chose mais environ 224 fois plus vite.

Comparaison

Utilisation de base
Utilisez le lite-youtube-embed ou téléchargez à partir de ce référentiel et utilisez src/.

Pour utiliser l'élément personnalisé, vous devrez :

Inclure la feuille de style dans votre application
Inclure également le script
Utilisre la balise lite-youtube via HTML ou JS.
Soyez heureux d'offrir une meilleure expérience à vos visiteurs

Récapitulatif
Le dossier src contient le CSS et le JS que vous mettez dans votre thème.
Et le dossier variants ou se trouve tous les exemple de lecteur.

source

Installation du script:

1 Inclure le CSS dans main.tpl
2 Connecter le JS à main.tpl

<!-- Incluez le CSS et le JS.. (Cela peut être directement depuis le package ou groupé) --> 
<link  rel="stylesheet" href ="node_modules/lite-youtube-embed/src/lite-yt-embed .css"/>

<script  src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

Dans vos page si vous utilisez iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/IvKPrxVHwJ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Remplacez par

<!-- Utilisez l'élément. Vous pouvez l'utiliser avant l'exécution du JS lite-yt-embed. -->
<lite-youtube videoid="IvKPrxVHwJ0" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Note de confidentialité: lite-youtube utilise youtube-nocookie.com au lieu de youtube.com afin d'être plus respectueux de la vie privée pour les utilisateurs finaux.

Paramètres de lecteur personnalisés
YouTube prend en charge une variété de paramètres de lecteur pour contrôler le comportement et l'apparence de l'iframe. Ces paramètres peuvent être appliqués en utilisant l'attribut params.

<!-- Exemple pour montrer un lecteur vidéo sans contrôles, commençant à 10s, finissant à 20s,
     avec un branding modeste *et* l'activation de l'API JS -->
<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>

Notez que lite-youtube utilise autoplay=1 par défaut

Utilisation pro: chargement avec JS différé (aka amélioration progressive)
Utilisez ceci comme votre HTML, chargez le script de manière asynchrone, et laissez le JS l'améliorer progressivement)

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
  <button type="button" class="lty-playbtn">
    <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
  </button>
</lite-youtube>

Image d'affiche personnalisée
Si vous souhaitez afficher une image personnalisée, il suffit de la définir comme image d'arrière-plan, et lite-yt ne l'écrasera pas:

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');"></lite-youtube>

Les visiteurs du groupe Invités ne peuvent pas télécharger de fichiers sur le site.
Connectez-vous au site avec votre identifiant et mot de passe ou si vous êtes un nouvel utilisateur suivez le processus d'inscription sur le site.

Auteur: paulirish
Version DataLife: toutes

Cet article a été édité par: DarkLane - Samedi-9-11-2024, 17:05

Remerciement: 2

Ajouter un commentaire

Votre adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués *

Information

Les utilisateurs du Invités ne sont pas autorisés à ajouter des commentaires à cette publication.

Commentaires 3

8 Novembre 2024 17:44

pascal

merci comment le télécharger ?

Signaler

0
9 Novembre 2024 17:05

DarkLane

Citation: pascal
merci comment le télécharger ?

C'est réparé

Signaler

0
10 Novembre 2024 15:58

pascal

merci pour votre travail

Signaler

0