psp (or any other device. kinda) video player tutorial

this is an explanation of how i made the psp video player on my home page, but also a tutorial on hpw you can apply it to multiple devices
if you just want the code here it is but i recommend looking at the tutorial if you want to know how to make your own

html+javascript

<div class="mySlides">
              <iframe loading='lazy' width="560" height="315" src="https://www.youtube.com/embed/b_NP_kG6Fa4?si=dE4rMo4IumjImHtN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>   
                  </div> 
                          
                       
                     
                <script>
                        var slideIndex = 1;
                        showSlides(slideIndex);
                        
                        // Next/previous controls
                        function plusSlides(n) {
                          showSlides(slideIndex += n);
                        }
                        
                        function showSlides(n) {
                          var i;
                          var slides = document.getElementsByClassName("mySlides");
                          if (n > slides.length) {slideIndex = 1}
                          if (n < 1) {slideIndex = slides.length}
                          for (i = 0; i < slides.length; i++) {
                            slides[i].style.display = "none";
                          }
                          slides[slideIndex-1].style.display = "block";
                        }
                        </script>    
                      
                      </div>
                    </div>
            </div>

css

in simple terms ..... its a video placed over an image of a psp (with a lot of extra styling). you can have 1 video/image or multiple with the slideshow system. for this tutorial I'll be explaining the most bare bones approach

first get an image of the device you want it to be. for this tutorial I'll be using a psp but you can make one with a phone, tv, camera, etc just any device with a screen.
next cut out the left and right buttons of your device. the psp has them but it might be different depending on what you want to do. then crop the buttons and save them as seperate images
once you have the main device image and the buttons, we can start the html and css. make some kind of container fro everything to go in. in my code its called "#psp". next add the base image. after that add the buttons

the id and class are for styling but you need to add the "onclick" to make the slideshow work. if youre not making a slideshow then you can ignore it
next is where the videos go. i've been saying video but you can really put whatever you want in there. make a div, in my code its called "pspstuff", then inside that a div with the class "modal-content". in that div make whoever many divs you want with the class "mySlides". these will be where you put your videos/images

if you dont know how to get the embed code for a youtube video, under the video click share, then click embed, then copy that code and paste it into the "mySlides" div
now for the actual script.... in a script tag, just copy and past the code i got it from w3schools lol. this is how theslide show will cycle through the slides

faq

how do you tilt/skew it ?
- add "transform: skew([number]deg,[number]deg);" to the div for the device and div for the videos and adjust acordingly so theyre lined up
how do you add the blue filter + hide it on hover ?
- add "filter:sepia(95%) hue-rotate(180deg) grayscale(0%);" to the iframes and iframe:hover {filter:none;}" to make it go away on hover