Bonjour à toutes et à tous.
Voilà, sur la page d'accueil de ma boutique j'ai actuellement un diaporama que je souhaite supprimer car je pense qu'hormis la première image les autres ne sont pas trop visualisées.
J'aimerai remplacer ce diaporama par une bande vidéo (hauteur tronquée à la dimension souhaitée).
J'ai déjà compris qu'il fallait "simplement" mettre des lignes de code dans le bloc concerné. Comme je ne suis pas codeur, je me suis inspiré du code de Webbax qui est ci-dessous.
Je sais bien que son code est fait pour faire un arrière plan, mais le problème est le suivant.
Les modules Leothème que j'utilise permettent de créer des blocs et d'y mettre un peu ce qu'on veut. Il y a des blocs tout faits (pour Facebook ou Youtube par exemple) et il est aussi possible de placer un bloc et d'y mettre simplement du html
J'ai un peu bricolé le code de Webbax vraiment au petit bonheur la chance mais j'ai toujours la vidéo soit en arrière plan soit pas de vidéo du tout ! J'ai mes limites mais j'aime apprendre
Dans le fichier joint, ce que j'aimerai faire. Important : c'est une vidéo que je mettrai sur mon serveur, pas un lien Youtube ou Viméo.
Merci d'avance pour votre aide,
Alain
En pièce jointe, j'ai mis la place ou j'aimerai placer la vidéo, une copie d'écran du bloc 'Apediting" et le code que j'y ai placé.
Quote{* 06.03.19 - Webbax Tuto 71 - Background vidéo *}
{if $page.page_name=='index'}
<video autoplay loop id="video-background" muted plays-inline>
<source src="{$urls.base_url}video/bg.mp4" type="video/mp4">
</video>
<style>
{literal}
#wrapper{
background-attachment: fixed;
background-size: cover;
}
#video-background{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
#wrapper{
background:none;
}
#wrapper .container{
background-color:#fff;
padding-top:15px;
}
#footer{
background:#fff;
}
/* mobile */
@media(max-width:600px){
#video-background{display:none!important;}
}
{/literal}
</style>
{/if}
{* --- *}
