Vidéo YouTube dans une fancybox avec WA4
Page 1 sur 1
Vidéo YouTube dans une fancybox avec WA4
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.
- 3 - Code CSS à placer dans le head (propriétés de la page) pour personnaliser le texte du lien.
- 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.
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
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.
exemple avec autoplay :
<a class="site" href="https://www.youtube.com/embed/W15t66QidCU?rel=0">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&autoplay=1">Afficher la video</a>
<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
Sujets similaires
» Vidéo fonctionne dans Edge mais pas d'image dans Chrome
» Vidéo avec ombre portée
» Comment intégrer un fichier dans un code avec WebAcappella Responsive
» placer 2 composant HTLM dans un même propriété de page avec WARC
» Peut-on utiliser la Fonction blog qui existait dans les version précédente avec WAR
» Vidéo avec ombre portée
» Comment intégrer un fichier dans un code avec WebAcappella Responsive
» placer 2 composant HTLM dans un même propriété de page avec WARC
» Peut-on utiliser la Fonction blog qui existait dans les version précédente avec WAR
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum