API tools faq
paste
Advertisement
Guest User

Notion Youtube Music Player

a guest
Jan 21st, 2023
1,121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.29 KB | None | 0 0
raw download clone embed print report
  1. <!-- Creating the Iframe, this is the only place you'll need to edit if you want to simply use it as it, just add your ID where indicated.
  2. Be careful NOT to delete "&enablejsapi=1" as this will disable the player controls. -->
  3.  
  4. <body>
  5.     <iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=(YOUR URL ID GOES HERE!!!!!)&enablejsapi=1" frameborder="0"></iframe>
  6.  
  7.     <!--Making the buttons I used SVG images from https://www.svgrepo.com/ There's probably a more efficent way to insert SVGs but this is how I know to do it.
  8. If you want to change the icons find your desired SVG, open the image in notepad or other text editor and copy and paste the nessecery part into the svg bracket- only
  9. replace from "fill=" otherwise you will lose the button class and id-->
  10.  
  11.     <div class="buttons">
  12.         <svg class=button id=BACKWARD fill="#333333" width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  13.             <path d="M347.6 528.95l383.2 301.02c14.25 11.2 35.2 1.1 35.2-16.95V210.97c0-18.05-20.95-28.14-35.2-16.94L347.6 495.05a21.53 21.53 0 0 0 0 33.9M330 864h-64a8 8 0 0 1-8-8V168a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v688a8 8 0 0 1-8 8" />
  14.         </svg>
  15.  
  16.         <svg class=button id="PLAY" fill="#333333" width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
  17.             <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm144.1 454.9L437.7 677.8a8.02 8.02 0 0 1-12.7-6.5V353.7a8 8 0 0 1 12.7-6.5L656.1 506a7.9 7.9 0 0 1 0 12.9z" />
  18.         </svg>
  19.  
  20.         <svg class=button id=PAUSE fill="#333333" width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
  21.             <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-80 600c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V360c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v304zm224 0c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V360c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v304z" />
  22.         </svg>
  23.  
  24.         <svg class=button id=FORWARD fill="#333333" width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  25.             <path d="M676.4 528.95L293.2 829.97c-14.25 11.2-35.2 1.1-35.2-16.95V210.97c0-18.05 20.95-28.14 35.2-16.94l383.2 301.02a21.53 21.53 0 0 1 0 33.9M694 864h64a8 8 0 0 0 8-8V168a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v688a8 8 0 0 0 8 8" />
  26.         </svg>
  27.     </div>
  28.     <!-- Making the Volume slider. You shouldn't change anything here, if you want to change how it looks you'll do so in the CSS elements. -->
  29.  
  30.     <div class="slidecontainer" id=VOLUME>
  31.         <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
  32.     </div>
  33. </body>
  34. <!-- CSS Styling. If you don't have experince in CSS but you'd still like to modify how things look I'd suggest using (https://webcode.tools/generators/css) as a refrence :) -->
  35.  
  36. <style>
  37.     /* Layout */
  38.     body {
  39.         display: flex;
  40.         flex-flow: column wrap;
  41.         align-content: space-around;
  42.         justify-content: center;
  43.     }
  44.  
  45.     /* Buttons, if you want to change the size opacity and hover properties it's done here.*/
  46.     .button {
  47.         width: 48px;
  48.         height: 48px;
  49.         opacity: 1;
  50.         -webkit-transition: .5s;
  51.         transition: opacity .5s;
  52.     }
  53.     }
  54.  
  55.     .button:hover {
  56.         opacity: 0.5;
  57.     }
  58.  
  59.     /* Video player, you shouldn't need to touch this since all it does is hide the player. */
  60.     #playlist {
  61.         display: none;
  62.     }
  63.  
  64.     /* Volume slider, this is where you can change it's appearance. */
  65.     .slider {
  66.         -webkit-appearance: none;
  67.         margin-left: 35px;
  68.         appearence: none;
  69.         border-radius: 20px;
  70.         background-color: #333333;
  71.         height: 5px;
  72.         opacity: 1;
  73.         -webkit-transition: .5s;
  74.         transition: opacity .5s;
  75.     }
  76.  
  77.     .slider:hover {
  78.         opacity: 0.5;
  79.     }
  80.    
  81.     .slider::-webkit-slider-thumb {
  82.         -webkit-appearance: none;
  83.         appearance: none;
  84.         width: 25px;
  85.         height: 25px;
  86.         border: 10px double #333333;
  87.         border-radius: 50%;
  88.         background: #ffffff;
  89.     }
  90. </style>
  91.  
  92.  
  93. <!-- JAVASCRIPT Unless you know what you're doing, don't touch this, it will break everything. -->
  94. <script>
  95.     //Creating the player variable and onPlayerReady function
  96.     var player;
  97.  
  98.     function onYouTubePlayerAPIReady() {
  99.         player = new YT.Player("playlist", {
  100.             events: {
  101.                 onReady: onPlayerReady
  102.             }
  103.         });
  104.     }
  105.  
  106.     //Calling the onPlayerReadey function, everything involving interactions with the player should be containted in here in order to work.
  107.     function onPlayerReady(event) {
  108.  
  109.         //Binding the Play button
  110.         var playButton = document.getElementById("PLAY");
  111.         playButton.addEventListener("click", function() {
  112.             player.playVideo();
  113.         });
  114.  
  115.         //Binding the Pause button
  116.         var pauseButton = document.getElementById("PAUSE");
  117.         pauseButton.addEventListener("click", function() {
  118.             player.pauseVideo();
  119.         });
  120.  
  121.         //Binding the Back button
  122.         var backButton = document.getElementById("BACKWARD");
  123.         backButton.addEventListener("click", function() {
  124.             player.previousVideo();
  125.         });
  126.  
  127.         //Binding the Next button
  128.         var forwardButton = document.getElementById("FORWARD");
  129.         forwardButton.addEventListener("click", function() {
  130.             player.nextVideo();
  131.         });
  132.  
  133.  
  134.         //Binding the Volume Slider Slider, I formatted it diffrently since it's slightly more complicated than the buttons and requires and extra
  135.         //variable. Also this is how I learnt to make sliders react and I can't be bothered changing the format to match with everything else, since
  136.         //I might break something lol
  137.         document.getElementById("myRange").addEventListener("change", function() {
  138.             var volume = this.value;
  139.             player.setVolume(volume);
  140.         });
  141.  
  142.     }
  143.  
  144.  
  145.     //API stuff
  146.     var tag = document.createElement("script");
  147.     tag.src = "//www.youtube.com/player_api";
  148.     var firstScriptTag = document.getElementsByTagName("script")[0];
  149.     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  150. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!