Accueil Contact

Sondage

Que pensez vous de templatedlefr


Faites un don



Chat

DarkLane
DarkLane Hors-ligne
14:08:40

sookool,
Tu peux participer si tu en as envie il y a pas de problème. Pas besoin de demander
sookool
sookool Hors-ligne
29 Novembre 2021

bnsr tout le monde ... admin si vous avez besoin d'aide pour creation theme ou modification ou traduction je peut vous aider :)
neelix
neelix Hors-ligne
22 Novembre 2021

Bonne semaine à tous
DarkLane
DarkLane Hors-ligne
21 Novembre 2021

Bonne fin de week end et bonne semaine à tous

Seuls les membres peuvent poster dans le salon de discussion.

Commentaires

Copyright © 2020

Qui est en ligne

carlos
Pseudo: carlos
Utilisateur en ligne
Groupe: Membre
Articles: 0
Commentaires: 0
Visite: 02:01


sookool
Pseudo: sookool
Utilisateur hors ligne
Groupe: Membre
Articles: 0
Commentaires: 2
Visite: 00:06


Lite YouTube Embed

24-11-2021, 18:08 | Catégorie: modules | Vues: 23 | Signaler?


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
Lite YouTube Embed


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

Vous n'êtes pas autorisé à télécharger sur notre site! Veuillez vous connecter ou vous inscrire



Cher visiteur, Vous avez accédé à ce site en tant qu'utilisateur non enregistré. Nous vous recommandons de vous enregistrer ou de vous connecter avec votre nom d'utilisateur.
Auteur: DarkLane

Information

Les membres de ce groupe Invités ne sont pas autorisés à commenter cette publication.