How to create a custom frame for Youtube embedded player?

Question

i'm developing a website in which i want to show videos from youtube (using the embedded player offered from YT) modifying the frame outside the player.

More specific, i want to create a television img in which, instead of the tv screen, i want to show my videos.

I've tried to create a photo from photoshop cancelling the screen, but then, in HTML, if i choose that img as background-div photo or inserting it as < img src="" />, using z-indexes, i cannot click on the "play" button of my video, because it is covered by the "television" div. Any Help??

Answer 1

You could slice up your image into a top/left/right/bottom section, and place them around the youtube video (overlaying the edges of the youtube player)

I've mocked up a jsfiddle that uses background-color instead of the sliced up images.

HTML:

<div id="TV">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
    <div id="playButton">play<div>
</div>

CSS:

#TV{position:absolute;width:500px;height:300px;}
#top{position:absolute;top:0;width:500px;height:20px;background-color:red;}
#left{position:absolute;top:0;left:0;width:20px;height:300px;background-color:red;}
#right{position:absolute;top:0;right:0;width:20px;height:300px;background-color:red;}
#bottom{position:absolute;bottom:0;width:500px;height:20px;background-color:red;}
#playButton{height:100px;width:100px;border-radius:100px;background-color:yellow;left: 200px;position: absolute;top: 90px;}
#playButton:hover{background-color:red;}

I also have an example of this in action, where you would draw on the canvas in the middle of the "frame" images. Here

The only caveat is that you need to use fixed heights and widths, and absolute positions.

Answer 2

This is a code html with it you can insert a YT video

 <iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>