Вставка видео на сайт с “custom button”

203
10 декабря 2016, 10:29

Здравствуйте. Подскажите, можно ли вставить видео с "youtube", а вместо стандартного ютуб плеера заменить кнопку "play" на такую как на скрине. Или в двух словах расскажите новичку, как это реализовано. Спасибо.

Answer 1

Добрый день. Данную задачу можно решить по средствам Youtube API. К примеру у нас есть плеер, и есть блок с нужной информацией, позиционированный строго над плеером, по клику на блок - нужно скрыть его и выполнить команду play у плеера.

var yt_frame = document.querySelector('.video__player'), 
	video_placeholder = document.querySelector('.video__placeholder'); 
   
  video_placeholder.addEventListener('click',play); 
 
function play(){ 
	yt_frame.contentWindow.postMessage(JSON.stringify({ 
                'event': 'command', 
                'func': 'playVideo', 
                'args': [] 
            }),'*'); 
          video_placeholder.style.display="none";   
}
.video { 
  position:relative; 
width:400px; 
height:400px; 
} 
 
.video__player { 
  width:100%; 
  height:100%; 
} 
 
.video__placeholder { 
  position:absolute; 
  width:100%; 
  height:100%; 
  background:red; 
}
<div class="video"> 
<div class="video__placeholder"> 
  Контент 
</div> 
<iframe class="video__player" src="https://www.youtube.com/embed/vYrIoMREDQs?enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
</div>

Fiddle - https://jsfiddle.net/erm0j1tq/

READ ALSO
IE11 input type=&ldquo;file&rdquo; accept=&ldquo;&rdquo; всегда добавляются HTML и Images

IE11 input type=“file” accept=“” всегда добавляются HTML и Images

В IE11, какой бы тип файла не был выбран в accept, всегда добавляются две дополнительные категории: "Html" и "Images"Например, если требуется кастомный...

184
mailto не работает для большого количества адресатов

mailto не работает для большого количества адресатов

Добрый день! Есть необходимость создавать письмо с помощью mailtoС помощью js создаю следующее:

162
При выборе значения select изменить значения в другом select-e

При выборе значения select изменить значения в другом select-e

Добрый день! Возникла проблема с реализацией такой, что если выбрать значение в одном selecte, то изменяться значения в другомК примеру, есть...

302