A Youtube Music Player vinyl (just css and html) Version 2

Tags: vinyl, music, youtube

Description:

Version 2 Update -More than one Music Vinyl? No Problem! -Just Spinning on Playback -Ajusting flex-box layout -you can also choose just one music player and delete other 2 :) A simple yet stylish music player feel free to customise it to your needs! works with any youtube video! you just need to go to youtube and create an embed off your desired video, then recplace the embed url with (src tag) your video src Attention: The video src is NOT the video url! You can also replace the album src of the vinyl just update the url.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by kirinaru (https://layouts.spacehey.com/layout?id=105395) -->

<style>
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  .recordPlayers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .recordPlayer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 10px;
    position: relative;
  }

  .record {
    display: flex;
    align-items: center;
    position: relative;
  }

  .vinyl {
    height: 80px; 
    margin-left: -50px; 
    position: relative;
    animation: none; 
  }

  .vinylCover {
    height: 80px;
    z-index: 1;
    position: relative;
  }

  .videoContainer {
    display: none;
  }

  #videoContainer1:target ~ .recordPlayers .recordPlayer:nth-child(1) .vinyl,
  #videoContainer2:target ~ .recordPlayers .recordPlayer:nth-child(2) .vinyl,
  #videoContainer3:target ~ .recordPlayers .recordPlayer:nth-child(3) .vinyl {
    animation: spin 1.88s linear infinite;
  }

  #videoContainer1:target,
  #videoContainer2:target,
  #videoContainer3:target {
    display: block;
visibility: hidden;
height: 3px;
width: 3px;
  }

  .button {
    background-color: #ff69b4;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    margin-top: 10px;
  }

  .button:hover {
    background-color: #ff1493;
  }
</style>


<!-- Video containers -->
<div id="videoContainer1" class="videoContainer">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/NfMegACVJQw?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

<div id="videoContainer2" class="videoContainer">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/IchuCtA1rCU?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

<div id="videoContainer3" class="videoContainer">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/eg4wtcjr0Zw?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

<div class="recordPlayers">
  <!-- First record player -->
  <div class="recordPlayer">
    <div class="record">
      <img class="vinylCover" src="http://pm1.narvii.com/6091/a67d084f9c70b4a989bda656891c324aa8a18285_00.jpg"/>
      <img class="vinyl" src="https://beta.vinylify.com/wp-content/uploads/2018/05/vinyl-black.png"/>
    </div>
    <a href="#videoContainer1" class="button">Play</a>
  </div>

  <!-- Second record player -->
  <div class="recordPlayer">
    <div class="record">
      <img class="vinylCover" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.scdn.co%2Fimage%2Fab67616d0000b2731b77be4e73086a6cbb350108&f=1&nofb=1&ipt=c5149646fd49a669d56eb126dbdbb6ff4406615c2be98279e17f0bba8397f71e&ipo=images"/>
      <img class="vinyl" src="https://beta.vinylify.com/wp-content/uploads/2018/05/vinyl-black.png"/>
    </div>
    <a href="#videoContainer2" class="button">Play</a>
  </div>

  <!-- Third record player -->
  <div class="recordPlayer">
    <div class="record">
      <img class="vinylCover" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.scdn.co%2Fimage%2Fab67616d0000b273139c312b2b54d1dde7524904&f=1&nofb=1&ipt=9ee23caa772d974d630a672937bbd102e117fff69f7fc1c108aca7a9aaf036da&ipo=images"/>
      <img class="vinyl" src="https://beta.vinylify.com/wp-content/uploads/2018/05/vinyl-black.png"/>
    </div>
    <a href="#videoContainer3" class="button">Play</a>
  </div>
</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

dixneeva

1715644977

using

Report Comment