https://www.biodiversidad.gob.ec/wp-content/themes/Sitio-32/js/youtube.js

1// 2. This code loads the IFrame Player API code asynchronously.
2var tag = document.createElement('script');
3
4tag.src = "https://www.youtube.com/iframe_api";
5var firstScriptTag = document.getElementsByTagName('script')[0];
6firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
7
8// 3. This function creates an <iframe> (and YouTube player)
9//    after the API code downloads.
10var player1;
11var player2;
12
13// 4. The API will call this function when the video player is ready.
14function onPlayerReady1(event) {
15    //event.target.playVideo();
16    console.log("VIDEO READY 1");
17    player1.addEventListener('onStateChange', onPlayerStateChange1);
18    var width = $('#player1').innerWidth();
19    var height = $('#player1').innerHeight();
20    var height2 = $('#youtube1ico').innerHeight();
21    var width2 = $('#youtube1ico').innerWidth();
22    height2 = (height - height2) / 2;
23    width2 = (width - width2) / 2;
24    $('#youtube1img').width(width);
25    $('#youtube1img').height(height);
26    $('#youtube1img').show();
27    $('#youtube1ico').css({'display': 'block', 'top': height2, 'left': width2});
28   /*
29    $('#youtube1ico > i').each(function () {
30        $(this).height(height);
31    });*/
32}
33function onPlayerReady2(event) {
34    //event.target.playVideo();
35    console.log("VIDEO READY 200");
36    player2.addEventListener('onStateChange', onPlayerStateChange2);
37    var width = $('#player1').innerWidth();
38    var height = $('#player1').innerHeight();
39    var height2 = $('#youtube2ico').innerHeight();
40    var width2 = $('#youtube2ico').innerWidth();
41    console.log("Width :: " + width + "::" + height);
42    height2 = (height - height2) / 2;
43    width2 = (width - width2) / 2;
44    $('#youtube2img').width(width);
45    $('#youtube2img').height(height);
46    $('#youtube2img').show();
47    $('#youtube2ico').css({'display': 'block', 'top': height2, 'left': width2});
48}
49
50function onPlayerError1(event) {
51    console.log("ERROR PLAYER 1 : " + event.data);
52}
53function onPlayerError2(event) {
54    console.log("ERROR PLAYER 2 : " + event.data);
55}
56
57// 5. The API calls this function when the player's state changes.
58//    The function indicates that when playing a video (state=1),
59//    the player should play for six seconds and then stop.
60var done1 = false;
61function onPlayerStateChange1(event) {
62    console.log("Video STATE 1 CHANGE :: " + event.data);
63    $('#videos-carousel').carousel('pause');
64    //console.log("PLAYER CHANGE 1" + event);
65    if (event.data == YT.PlayerState.PLAYING) {
66        //setTimeout(stopVideo1, 6000);
67        //$('#videos-carousel').carousel('pause');
68        //console.log("VIDEO  1 PLAYING");
69        done1 = false;
70    }
71}
72
73
74var done2 = false;
75function onPlayerStateChange2(event) {
76    console.log("Video STATE 1 CHANGE :: " + event.data);
77    $('#videos-carousel').carousel('pause');
78    //console.log("PLAYER CHANGE 2" + event);
79    //console.log("VIDEO  2 PLAYING");
80    if (event.data == YT.PlayerState.PLAYING) {
81        //setTimeout(stopVideo2, 6000);
82        //$('#videos-carousel').carousel('pause');
83        //console.log("VIDEO  2 PLAYING");
84        done2 = false;
85    }
86}
87
88function stopVideo1() {
89    player1.stopVideo();
90}
91
92function stopVideo2() {
93    player2.stopVideo();
94}
95
96jQuery("#youtube1img").click(function () {
97    $('#youtube1img').hide();
98    $('#youtube1ico').hide();
99    player1.playVideo();
100
101});
102jQuery("#youtube2img").click(function () {
103    $('#youtube2img').hide();
104    $('#youtube2ico').hide();
105    player2.playVideo();
106});
107jQuery("#youtube1ico").click(function () {
108    $('#youtube1img').hide();
109    $('#youtube1ico').hide();
110    player1.playVideo();
111
112});
113jQuery("#youtube2ico").click(function () {
114    $('#youtube2img').hide();
115    $('#youtube2ico').hide();
116    player2.playVideo();
117});
118