Задать вопрос
Yarez
@Yarez
Web Developer
javascript

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

Добрый день!
Очень нужно привязать кнопку play YouTube к определенному элементу (картинке). Как это можно осуществить с помощью JavaScript или jQuery? Долго душил гугл но он молчит как партизан.
  • Вопрос задан
  • 4448 просмотров
4 комментария
Подписаться 1 Оценить 4 комментария
Решения вопроса 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>
Ответ написан
1 комментарий
1 комментарий
lebonnet
@lebonnet
не правильные вопросы задаете гуглу
или просто нужно было периодически отпускать горло, чтоб он мог ответить
запрос 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>

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Чат бот телеграмм-python
28 нояб. 2024, в 05:21
2000 руб./за проект
Проверить программу Python
28 нояб. 2024, в 05:18
500 руб./за проект
Разработка простого C++ Плагина After Effects
28 нояб. 2024, в 03:51
3500 руб./за проект
Ещё заказы