Salut à tous !

Bon le titre est pas très claire par rapport à ma question alors je vais vous détailler mon problème.

Je réalise actuellement un site d'agence web fictive, dont une page contient les réalisations de l'agence, notamment des vidéos.

Celles-ci sont hébergées sur Youtube. Sur la page de réalisations, on voit donc des images correspondant aux vidéos (les miniatures) et quand on clique dessus, la vidéo apparaît au dessus, via jquery. J'ai également rajouté un icone de croix pour faire disparaître la vidéo en cours. Problème, si la vidéo est en cours de lecture, et qu'on clique sur la croix ou sur une autre miniature pour regarder une autre vidéo, la première ne va pas se couper.

Y a-t-il une fonction html ou jquery permettant de le faire ?

Code HTML

<section id="section-realisations" class="main-section container">

        <h2 class="text-uppercase title-section">Nos réalisations</h2>
        <section class="separator-content">
          <div class="separator-element"></div><div class="separator-element"></div>
        </section>

        <div id="video-astre" class="realisation">
          <a href="#!"><img class="close" src="images/ic-close.png" alt="Close"/></a>
          <iframe width="640" height="360" src="https://www.youtube.com/embed/NGZOBpUVF-U?rel=0" frameborder="0" allowfullscreen></iframe>
          <h4 class="title-realisation">Astre // Kitsune - 2016</h4>
        </div>
        <div id="video-urban-expression" class="realisation">
          <a href="#!"><img class="close" src="images/ic-close.png" alt="Close"/></a>
          <iframe width="640" height="360" src="https://www.youtube.com/embed/W9tp1vQxuJo?rel=0" frameborder="0" allowfullscreen></iframe>
          <h4 class="title-realisation">Bande démo // Urban Expression - 2016</h4>
        </div>
        <div id="video-sportive-ta-vie" class="realisation">
          <a href="#!"><img class="close" src="images/ic-close.png" alt="Close"/></a>
          <iframe width="640" height="360" src="https://www.youtube.com/embed/di8Fb_Isl2A?rel=0" frameborder="0" allowfullscreen></iframe>
          <h4 class="title-realisation">Présentation // Sportive Ta Vie - 2016</h4>
        </div>

        <!--All Realisations-->
        <section id="all-realisations">
          <section id="realisations-videos">
            <h3 class="title-type">Nos vidéos</h3>
            <section class="all-miniatures">
              <img id="miniature-astre" class="miniatures-realisations" src="images/miniature-astre.png" alt="miniature Astre" />
              <img id="miniature-urban-expression" class="miniatures-realisations" src="images/miniature-urban-expression.png" />
              <img id="miniature-sportive-ta-vie" class="miniatures-realisations" src="images/miniature-sportive-ta-vie.jpg" />
            </section>
          </section>
        </section>

Code jquery

$(document).ready(function(){

  $('.close').click(function() {
    $('.realisation').fadeOut(0);
  });

  $('.miniatures-realisations').click(function() {
    $('.realisation').fadeOut(0);
  });

// ALL REALISATIONS

  $('#miniature-astre').click(function() {
    $('#video-astre').toggle();
  });

  $('#miniature-urban-expression').click(function() {
    $('#video-urban-expression').toggle();
  });

  $('#miniature-sportive-ta-vie').click(function() {
    $('#video-sportive-ta-vie').toggle();
  });
});

Au passage, si vous avez apercevez des erreurs en jquery, n'hésitez pas à me les signalez, je débute

Salut,

Tu peux en effet passer par l'API Youtube.

Ainsi, au lieu d'avoir un iframe, ton code se présenterais ainsi (je te montre pour 1 réa)

<div id="video-astre" class="realisation">
  <a href="#!"><img class="close" src="images/ic-close.png" alt="Close"/></a>
  
  <h4 class="title-realisation">Astre // Kitsune - 2016</h4>
</div>

Le code HTML tu enlève juste l'iframe, rien de plus.

// Insert API async
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video-astre', {
      videoId: 'NGZOBpUVF-U',
      playerVars: {rel: 0}
  });
}

jQuery tu inclus l'API, puis tu ajoute la vidéo avec le bon ID (id de la vidéo), à ta div avec le bon ID (id de la div).

Puis tu peux controler l'action de ta vidéo sur des click facilement.

player.playVideo();
player.pauseVideo();
player.stopVideo();

Et je garde mon code jquery ?

Parce que j'ai enlevé l'iframe de l'html et ajouter l'api au fichier .js en recopiant ton code mais la vidéo n'apparaît pas :/

-
Edité par kevinboivent 16 mars 2017 à 23:04:26

Ok essaye ça en HTML plutôt alors :

<div id="video-astre" class="realisation">
  <a href="#!"><img class="close" src="images/ic-close.png" alt="Close"/></a>
   <div id="player" class="video-player"></div>
  <h4 class="title-realisation">Astre // Kitsune - 2016</h4>
</div>

Et ton JS :

function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
      videoId: 'NGZOBpUVF-U',
      playerVars: {rel: 0}
  });
}

ça ne marche pas non plus :/  

J'ai essayé de mettre les dimensions de la vidéo mais ça ne change rien :/ Je comprends vraiment pas pourquoi elle n'apparaît pas, je suis allé voir la documentation et je comprends pas ce qu'il faut changer. J'ai essayé de garder l'iframe mais ça ne marche pas non plus :/

Ta console te dis quelque chose ? Une erreur ?