Video avec possibilité de redirection versun lien

  • WordPress :5.2
  • Statut : non résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #2256687
    nawfel.mezouar@gmail.com
    Participant
    Initié WordPress
    14 contributions

    Bonjour,

    Je me permet de me rediriger vers la communauté car je souhaiterais ajouter une courte video en autoplay sur mon site et quand on clic dessus j’aimerai faire une redirection vers une page de mon site. Je souhaiterai quelque chose comme zara : https://www.zara.com/fr/fr/femme-vestes-l1114.html?v1=1180323

    Si vous avez une idee de plugin qui peu faire ça !!

     

    Merci a vous

     

    #2256693
    PhiLyon
    Modérateur
    Maître WordPress
    22910 contributions
    #2256829
    nawfel.mezouar@gmail.com
    Participant
    Initié WordPress
    14 contributions

    Bonjour,

    Merci PhiLyon, je suis pas developper savez vous ou je rajoute le scripte? (desoler pour la question debutant)

    #2256854
    PhiLyon
    Modérateur
    Maître WordPress
    22910 contributions

    Bonjour.

    Essaies avec cette extension https://fr.wordpress.org/plugins/insert-php/

    Sinon tu peux également le faire sans extension, avec un overlay, colles ce code dans un bloc HTML et survoles la vidéo, après il faudra mettre ta vidéo à la place de celle existante.

    <head>
    <style>
    .container {
      position: relative;
      width: 100%;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: transparent;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    
    .container:hover .overlay {
      width: 100%;
    }
    
    .text a:link {
      white-space: nowrap; 
      color: red;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
    padding:10px 20px 10px 20px;
    background:yellow;
    border:none;
      text-decoration : none;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    </style>
    </head>
    <body>
    
    <div class="container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/E8ZPNMOAZ4o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="overlay">
        <div class="text"><a href="https://wpfr.net/support/">7 à voir</a></div>
      </div>
    </div>
    
    </body>

    🙂

    #2256967
    nawfel.mezouar@gmail.com
    Participant
    Initié WordPress
    14 contributions

    Bonjour

    Ah super, Mercii

    Juste si ta une idee pour eviter un clic sur le bouton 7 a voir mais plutot sur la video  c’est possible? ca serai parfait.

    Merci beaucoup pour l’aide deja apporter PhiLyon

    #2256975
    PhiLyon
    Modérateur
    Maître WordPress
    22910 contributions

    Essaies comme-ça

    <head>
    <style>
    .container {
      position: relative;
      width: 100%;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: transparent;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    
    .container:hover .overlay {
      width: 100%;
    }
    
    .text a:link {
      white-space: nowrap; 
      color: transparent;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
    padding:50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    </style>
    </head>
    <body>
    
    <div class="container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/E8ZPNMOAZ4o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="overlay">
        <div class="text"><a href="https://wpfr.net/support/"></a></div>
      </div>
    </div>
    
    </body>

    🙂

    #2256998
    nawfel.mezouar@gmail.com
    Participant
    Initié WordPress
    14 contributions

    MERCIIIIIII c’est exactement ça !!!!

    Merci beaucoup de votre aide! j’apprecie

     

7 sujets de 1 à 7 (sur un total de 7)
  • Vous devez être connecté pour répondre à ce sujet.