Note 1
-
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> -
Vous n’êtes pas autorisé à télécharger des fichiers depuis notre serveur. Si vous voulez avoir accés aux téléchargements veuillez vous connecter ou inscrivez-vous sur le site c'est gratuit!
Informations complèmentaires
Auteur: paulirish
Version DataLife: toutes
Cet article a été édité par: DarkLane - Samedi 9 Novembre 2024 17:05:18
Cet article a été édité par: DarkLane - Samedi 9 Novembre 2024 17:05:18
DarkLane
Groupe: AdministrateursArticles similaire
Please write your comments in French; any comments written in a language other than French will not be replied to. Please use an online translator for this. Thank you!!