intégration d'une vidéo mp4 dans un bloc prestashop

[Alain sculpteur]

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}
    {* --- *}

 

Edited March 5, 2021 by Alain sculpteur (see edit history)

[Remy FRK Corp]

Bonjour.

"j'ai toujours la vidéo soit en arrière plan soit pas de vidéo du tout !" > certes mais si vous affichez tout cela derrière votre slider principal qui lui mème diffuse des photos opaques...c'est logique. iL reste possible de régler ce que l'on appelle le "z-index" en css mais du coup après avoir vu le tuto de webbax... qui à aucun moment ne préconise de placer l'affaire sous quelque chose d'opaque la question est porquois ne pas simplement supprimer le diaporama et le remplacer par la video (comme vous le dites vous mème d’ailleurs) ?

Si vous le pouvez envoyez un lien vers votre page avec la video affiché même si elle est "en dessous".

Edited March 5, 2021 by Remy FRK Corp (see edit history)

[Remy FRK Corp]

 

"au petit bonheur la chance mais j'ai toujours la vidéo soit en arrière plan soit pas de vidéo du tout !" suite...

OK

En relisant votre post je comprend à peu près ce qu'il vous arrive

1 > vous nous donnez le bout de code de webbax (sur lequel on ne feras pas de commentaires), donc supposément...si de mémoire je me souviens bien, il indique de placer ce bout dans le fichier layout-both-colomnus.tpl ... ce que donc vous avez due faire... le z-index est réglé à -100 et fi de propriété de display...et des tailles en % donc avec ça + votre mise en page actuelle, vous êtes sure de passé à peu près sous n'importe quoi... ce doit donc ètre le cas "en dessous"

2> votre copie d'écran d'un éditeur modulaire html de votre back office...qui lui parle html...et probablement pas smarty...donc il ne comprend pas votre url , le cas échéant c'est donc l'option "pas de video du tout"

 

donc à la limite laissez le code de webbax tranquille et dans votre éditeur modulaire inscrivez le lien de votre video sous la forme:

src="nom du répertoire/nom sous répertoire/nom de la video"

 

Edited March 6, 2021 by Remy FRK Corp (see edit history)

[Alain sculpteur]

Bonjour Remy,

Merci pour votre réponse, je vais revoir çà ce week-end.

Bon week-end et à bientôt,

Alain

[Remy FRK Corp]

Bon week end à vous