onclick placeholder изображение играет видимое встроенное видео

Question

Я использовал следующий код из другого сообщения здесь, и он отлично работает. Однако видео скрыто и появляется только после щелчка изображения.

Мне нужно небольшое изображение, чтобы сидеть поверх полноэкранного видимого видео. Изображение будет по кнопке воспроизведения, поэтому, когда они нажмут на изображение - изображение исчезнет, ​​и видео начнет воспроизводиться.

Это мой текущий код

CSS

.img{ z-index:1000; position:relative; onclick="z-index:-1000;"} 
#vid{z-index:1px; text-align:center;} 

#popup{text-align:center; 
width: 100%; 
position:absolute; 
top:40%; 
} 

body { 
background-color: #000;} 

HTML

<div id="popup"><a href="javascript:void(0);" onclick="this.parentElement.style.display='none';"><img src="images/TRIBEONE_DINOKENG.png" width="200" height="189" class="img" /></a></div> 

Помощь больш была бы оценена

Благодаря

Answer 1

Существует еще один трюк вы можете сделать в Javascript с по щелчку

$('#imgid').on('click',function(){ 
    $('#popup').innerHtml = "<iframe youtube video or other width="200" height="189"> 
    </iframe>"; 
}); 

С этим изменит то, что