Lite YouTube Embed

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

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>

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.

Auteur: paulirish
Version DataLife: toutes

source

---

Retour