Как создать собственную рамку для встроенного проигрывателя Youtube?

Я разрабатываю веб-сайт, на котором хочу показывать видео с YouTube (используя встроенный проигрыватель, предлагаемый YT), изменяя кадр вне проигрывателя.

Более конкретно, я хочу создать телевизионное изображение, в котором вместо экрана телевизора я хочу показывать свои видео.

Я попытался создать фотографию из фотошопа, отменив экран, но затем в HTML, если я выберу этот img в качестве фотографии background-div или вставлю его как ‹ img src="" />, используя z-индексы, я не могу нажмите кнопку "воспроизвести" моего видео, потому что оно закрыто разделом "телевидение". Любая помощь??


youtube-api html css youtube-data-api
person panc_fab    schedule 14.11.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете разделить изображение на верхнюю/левую/правую/нижнюю часть и разместить их вокруг видео на YouTube (накладывая края проигрывателя YouTube).

Я смоделировал jsfiddle, в котором вместо нарезанных изображений используется фоновый цвет.

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;}

У меня также есть пример этого в действии, когда вы рисуете на холсте в середине изображений «рамки». Здесь

Единственное предостережение заключается в том, что вам нужно использовать фиксированные высоты и ширины, а также абсолютные позиции.

person Mathias Rechtzigel    schedule 14.11.2013

arrow_upward
0
arrow_downward

Это код html с ним можно вставить YT видео

 <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>

person Marc Najem    schedule 09.05.2021