Film z YouTube, który zamyka się po kliknięciu na cokolwiek innego.

Question

 Hejka, jak tam wieczór?

 To tak, zacznijmy od tego iż miałem problem z adekwatnym tytułem ale mniejsza. Mój problem polega na tym iż po zaczerpinięciu kodu, który zaraz się pojawi, wystąpił problem, raczej nie błąd gdyż to normalne działanie skryptu. Otóż mam prośbę do ludzi, którzy znają Javascript, ja ososbiście nie mam zapału do nauki tego języka, moglibyście zedytować - o ile się da - bądź przerobić kod tak, aby po kliknięciu na tło, film zapauzował się?

Oto kod html:

					<a type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Obejrzyj</a>
						<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
							<div class="modal-dialog modal-lg">
									<iframe width="1280" height="720" src="https://www.youtube.com/embed/IIrCDAV3EgI" frameborder="0" allowfullscreen></iframe>
							</div>
						</div>

 Gdyby kto nie zrozumiał problemu, proszę o kliknięcie "Obejrzyj", puszczenie filmu i kliknięcie na tło. (Muzyka nadal gra, film się nie zapauzował).

 Co do kodu js'a - będzie trochę gorzej, otóż, jak niektórzy spostrzegli, jest to kod bootstrap'a. Nie za bardzo siedzę w js'ie także niezbyt wiem która funkcja pasuje do owego kodu. Cóż, znalazłem w pliku js'a frazę "Modal", która również występuje w kodzie html'a, jakby kto wiedział, że modal właśnie za to ustrojstwo odpowiada to linia w pliku: 911. 

Pozdrawiam.

 

Answer 1

Dobra. Mówię ci co i jak.

Na końcu adresu do filmu musisz dodać ?enablejsapi=1

Dam ci przykładowy kod, w którym film zatrzymujesz po kliknięciu na link. http://jsfiddle.net/writen/yfwp0xfv/1/

Wystarczy, że wewnątrz funkcji onPlayerReady wpiszesz kod, który ma robić to co chcesz.

Comments

To jest to! Tylko jest problem, że raz mi się film zatrzymuje, a raz nie.

Kod:

						<div class="modal fade bs-example-modal-lg-'.$row->id_music.' pause" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" onclick="player.pauseVideo();">
							<div class="modal-dialog modal-lg">
								<iframe width="854" height="480" src="https://www.youtube.com/embed/2fngvQS_PmQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
							</div>
						</div>

Kod Js'a:

		<script>
		var tag = document.createElement('script');

		      tag.src = "https://www.youtube.com/iframe_api";
		      var firstScriptTag = document.getElementsByTagName('script')[0];
		      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

		var player;
		      function onYouTubeIframeAPIReady() {
		        player = new YT.Player('player', {
		            events: {
		              'onReady': onPlayerReady
		            }
		        });

		      }

		function onPlayerReady() {
		    //tutaj sterujesz playerem
		$('.pause').on('click', function(e) {
			e.preventDefault();
		    player.stopVideo();
		});
		}
		</script>

 

---

Do iframe musisz dodać id="player". No i może być tylko jeden element z takim id.

Z tego diva możesz usunąć to onclick.

---

Kurcze pieczone, a co jeśli chciałbym mieć więcej niż jeden element "player"?

Oczywisćie, daje Najlepsza. :)

(Jeśli mam być szczery, to sądziłem że nie uda się rozwiązać problemu.)

Answer 2

Tutaj masz gotowiec (wystarczy lekko przerobić i doczytać):
https://developers.google.com/youtube/iframe_api_reference?hl=p

Comments

Zaraz sprawdzę.

---

Ta, to jest to... Tylko... Jak mam zrobić funkcję która będzie działała po kliknięciu na tło? To zanczy w której linii bootstrap.js wpierniczyć kod, który by odpowiadał za zatrzymanie?

-Nawet nie musi być w pliku boostrap.js, tylko żeby działało.

---

Dla elementu który jest tłem lub jakąś ikonką wyjścia, dać:

onclick="player.pauseVideo();"

 

---

Nie działa, uwierz jestem słaby z Js'a.

Zrobiłem tak, do tła, czyli:

<div class="modal fade bs-example-modal-lg-'.$row->id_music.'" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" onclick="player.pauseVideo();">

- dodałem onclick="..." tyle że nie wiem ile kodu ze strony:

https://developers.google.com/youtube/iframe_api_reference?hl=pl#Mobile_considerations

mam wkleić do pliku bootstrap.js, albo między selektory(czy jak to tam się nazywa) <script></script>

jak dodałem między

<script>

var player;

      function stopVideo() {
        player.stopVideo();
      }
</script>

- również nie działało,

---

Poczytaj dokładnie link, który dałem wyżej do opisu API youtube. Naprawdę nie trzeba znać JS, żeby sobie z tym poradzić.

 

Możesz też spróbował dołączyć jQuery i użyć $('iframe#youtube').remove(); na kliknięcie.

---

Tu właśnie jest problem, że trzeba się znać... Gdyby nie trzeba było, to zrobiłbym to ok. 30 min. temu od czytania artykłu, który mi podesłałeś jak i wklejaniem wszystkeigo po kolei, i sprawdzaniem czy są jakieś efekty. :***

---

Masz tam gotowiec..

---

 "Masz tam gotowiec..." - TAM - Panie! Tam jest gotowiec, ale trza znać javascript aby obrobić go do moich potrzeb! Gdy usunąłem jedno, wszystko trafiło szlag! Ja rozumiem że nie chcesz pomóc, dać link i se radź, ale chopie, weź mi napisz "Radź se sam", "Nie mam czasu", a nie takie gargołuchy: "Poczytaj dokładnie link, który dałem wyżej do opisu API youtube." "Nie trzeba znać Javascriptu aby sobie z tym poradzić...", czy "Masz tam gotowiec...". Serio, to tylko denerwuje, gdy ktoś tak pisze.

Życzę milej nocy.

---

Ale API YouTube dołączyłeś do strony?

---

Nie mam zielonego pojęcia. Gość, który pisał artykuł pominął napisać w prawym menu:

"Jak dołączyć API YouTube".

Tak czy inaczej, sądzę iż zaimplementowałem, gdyż przykład z działu "Pierwsze kroki" działa poprawnie.

Tak, dołączyłem - znalazłem to w kodzie:

// 2. This code loads the IFrame Player API code asynchronously.