Ellade
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Google Pixel 7 5G – Smartphone 6,3″ OLED FHD+ 8 Go + 128 Go
316 €
Voir le deal

Vidéo YouTube dans une fancybox avec WA4

Aller en bas

Vidéo YouTube dans une fancybox avec WA4 Empty Vidéo YouTube dans une fancybox avec WA4

Message par Ellade Sam 28 Déc 2013 - 20:02

Bonjour à tous

Comment mettre une vidéo YouTube dans une Fancybox avec WA4
Tuto pour utilisateurs expérimentés et seulement avec WA4.
Exemple ici

- 1 - Avec WA4 commençons par activer cette fancybox.
Placer une image et activer la fancybox de cette image, bien sûr cette image sera agrandie au clic sur l'image, si vous ne souhaitez pas cet agrandissement, vous pouvez cachez l'image derrière un élément transparent ou un autre objet selon vos besoins.

- 2 - Script à placer dans le head de la page (Propriétés de la page > Avancé), vous pouvez modifier width et height selon les dimensions désirées de votre box.
Code:
<script type="text/javascript">

jQuery(document).ready(function() {
 
jQuery("a.site").fancybox({

'hideOnContentClick': true,
 'padding' : 0,
 'overlayColor' :'#D3D3D3',
 'transitionIn' :'elastic',
 'transitionOut' :'elastic',
 'overlayOpacity' : 0.7,
 'zoomSpeedIn' : 300,
 'zoomSpeedOut' : 300,
 'width'     : 640,
 'height' :360,
 'type' :'iframe'

 });

 });

</script>

- 3 - Code CSS à placer dans le head (propriétés de la page) pour personnaliser le texte du lien.
Code:
<style type="text/css">

button
{
outline: none;
}
a img {
border:none;
}
 a:link {      
       font-size:12pt;
      text-align: Left;
      font-family: Comic sans ms;
      color:black;
      text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color:black;
    }
    a:hover {
        text-decoration: underline;
        color:grey;
    }
  
</style>


- 4 - Code html à placer dans l'élément "Code HTML" pour appeler la vidéo dans la fancybox
- Remplacer ce qui est en rouge par le le nom de la vidé (série de chiffre et numéro)
- ?rel=0 indique le non affichage des vidéos suggérées à la fin de la lecture de la vidéo.
- &autoplay=1 peut être ajouté à l'adresse de la vidéo cela indique un démarrage automatique de la vidéo ça ne fonctionne pas sur tous les supports mais pour ceux qui sont intéressés autant en profiter pour les supports qui prennent en compte.

<a class="site" href="https://www.youtube.com/embed/W15t66QidCU?rel=0">Afficher la video</a>
exemple avec autoplay :

<a class="site" href="https://www.youtube.com/embed/W15t66QidCU?rel=0&autoplay=1">Afficher la video</a>
Code à placer si vous préférez un lien à partir d'une image

<a class="site"  href="https://www.youtube.com/embed/W15t66QidCU?rel=0">
<img src="http://www.adresse-image" alt=" " /></a>

En vert indiquer l'adresse de l'image

La source qui m'a permis de mettre cette fancybox en place c'est ici.

Bonne mise en place
Babyl
Ellade
Ellade
Admin

Messages : 1033
Date d'inscription : 11/03/2009

https://ellade.forumperso.com

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum