Yarez
@Yarez
Web Developer

Как привязать YouTube play button к нужному мне элементу с определенным id при помощи JavaScript/jquery?

Добрый день!
Очень нужно привязать кнопку play YouTube к определенному элементу (картинке). Как это можно осуществить с помощью JavaScript или jQuery? Долго душил гугл но он молчит как партизан.
  • Вопрос задан
  • 4444 просмотра
Решения вопроса 2
@frees2
// vid = "b6jDJVPOivI%3Flist%3D";
var player;  function onYouTubeIframeAPIReady() 
{ player = new YT.Player('player',{ videoId:'b6jDJVPOivI',
playerVars: { autoplay: 1, html5: 1, theme: "light", modesbranding: 0,
color: "white", iv_load_policy: 3, showinfo: 0, controls: 2, 'wmode':'opaque', 'list' : ''}, }); }  
var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

демка

<span onclick="player.loadVideoById('5NkDEip16RE', 0);history.pushState('5NkDEip16RE', null, '5NkDEip16RE');document.title = 'ЕЦБ отказался кредитовать Афины под залог облигаций';return false"> ◄ <img src="https://i.ytimg.com/vi/5NkDEip16RE/default.jpg" class="img_class"> <b>ЕЦБ отказался кредитовать Афины под залог облигаций</b></span>
Ответ написан
не правильные вопросы задаете гуглу
или просто нужно было периодически отпускать горло, чтоб он мог ответить
запрос youtube+api выдал результат думаю все там есть

Написал код, нужно подключить одну библиотеку причем как говорится в оф документации
swfobject.js
Важное примечание. Чтобы протестировать вызовы функций, необходимо разместить файл на веб-сервере, поскольку Flash Player блокирует вызовы между локальными файлами и Интернетом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>SWFObject 2 static publishing example page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">

			var params = { allowScriptAccess: "always" };
			var atts = { id: "myytplayer" };
			swfobject.embedSWF("http://www.youtube.com/v/-c7hCWwTlrY?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "425", "356", "8", null, null, params, atts);

			function onYouTubePlayerReady(playerId)
			{
				ytplayer = document.getElementById("myytplayer");
				console.log('ytplayer ' , ytplayer);
				$(document).on('click', '.play_YP', function(e)
				{
					e.preventDefault();
					ytplayer.playVideo();
				})
			}

		</script>

	</head>
	<body>
		<div>
			<div id="ytapiplayer">
				You need Flash player 8+ and JavaScript enabled to view this video.
			</div>
			<a class="play_YP" href="#" onclick="stop()">Play</a>
		</div>
	</body>
</html>

Документация на русском
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы