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.
ComparaisonUtilisation de baseUtilisez 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ésYouTube 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éeSi 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écapitulatifLe 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
Informations
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.
N'importe qui peut critiquer.
Créer quelque chose qui sera critiqué n'est pas donné à tout le monde.