Comment créer un player twitch html

J’ai moi-même cherché, j’ai eu un peu de mal à le paramétrer, mais ce code est le bon 😉

Pour le player et le chat :

<div class="twitch">
  <div class="twitch-video">
    <iframe
      src="https://player.twitch.tv/?channel=dewebner&parent=dewebner.ghost.io&autoplay=false"
      frameborder="0"
      scrolling="no"
      allowfullscreen="true"
      height="100%"
      width="100%">
    </iframe>
  </div>
  <div class="twitch-chat">
    <iframe
      frameborder="0"
      scrolling="no"
      src="https://www.twitch.tv/embed/dewebner/chat?parent=dewebner.ghost.io"
      height="100%"
      width="100%">
    </iframe>
  </div>
</div>

Et le Css:

<style>
.twitch .twitch-video {
  padding-top: 56.25%;
  position: relative;
  height: 0;
}

.twitch .twitch-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.twitch .twitch-chat {
  height: 400px;
}

.twitch .twitch-chat iframe {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 850px) {
  .twitch {
    position: relative;
  }

  .twitch .twitch-video {
    width: 75%;
    padding-top: 42.1875%;
  }

  .twitch .twitch-chat {
    width: 25%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
</style>

Annonces
Date de sortie le: 9 Mars 2024
United Penguin Kingdom
United Penguin Kingdom
Développeur: Turquoise Revival Games
Prix: 9,61 €
error

Vous avez aimé cet article ? Partagez-le