Cum încarc dinamic un embed Youtube?

Limbaje de Programare JavaScript / Node
1

Am gasit pe net

codul

<a id="play-video" href="#">Play Video</a><br />
 
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/CODYOUTUBE" frameborder="0" allowfullscreen></iframe>

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
 
    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();
 
  });
});

Eu as dori sa fie asa TAB 1 . TAB 2 . TAB 3

mai exact !
in loc de # din href as vrea sa fie link catre embed
exemplu
<a id="play-video" href="//www.youtube.com/embed/1">Tab1</a><br /> <a id="play-video" href="//www.youtube.com/embed/2">Tab2</a><br /> <a id="play-video" href="//www.youtube.com/embed/3">Tab3</a><br />
Si sa se incarce in iframe-ul de mai jos cand apasa TAB 1 etc.

<iframe id="video" width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

2 
<p><a href="http://www.youtube.com/embed/Q5im0Ssyyus" target="someFrame">Charlie 1</a></p>
<p><a href="http://www.youtube.com/embed/QFCSXr6qnv4" target="someFrame">Charlie 2</a></p>
<p><a href="http://www.youtube.com/embed/eaCCkfjPm0o" target="someFrame">Charlie 3</a></p>

<iframe name="someFrame" id="someFrame" width="560" height="315"></iframe>
<script>
$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();
        
        $("#someFrame").attr("src", $(this).attr("href"));
    })
});
</script>
3

Am gasit cat de cat o rezolvare ! Ceea ce imi mai lipseste este ca sa se incarce primul tab singur ! Nu imi afiseaza nimic pana nu dau click pe primul Tab

4

jQuery poate face două lucruri cu .click():

  1. Dacă i se trimite ca parametru o funcție, acea funcție va fi apelată la event-ul respectiv;
  2. Dacă nu i se trimite nici un parametru, face trigger la TOATE event-urile binduite pe selectorul respectiv.

Deci răspunsul tău este: $('a:first').click().

PS:titlul nu trebuie să conțină doar cuvinte cheie; „Iframe TAB jquery” nu spune absolut nimic despre problema ta :slight_smile:

1 Like
5

https://support.bigcommerce.com/articles/Public/How-do-I-make-a-YouTube-video-autoplay

nu te ajuta ce-i aici. youtube iti da posibilitatea sa faci autoplay prin adaugarea de parametrii la link-ul embedded
https://www.youtube.com/embed/G5s4-Kak49o?rel=0&autoplay=1

6

Nu voi pune neaparat link-uri youtube, deci nu ma interesa atat de mult functia autoplay !
Problema e ca nici acum nu am rezolvat cu primul tab sa fie activ la incarcare paginii…
:frowning:

<script>
$(document).ready(function(){
    $("a.myButtons").click(function(e) {
        e.preventDefault();
        $('a:first')
        $("#someFrame").attr("src", $(this).attr("href"));
    })
});
</script>


<div class="container">

<ul class="nav nav-tabs">
   
 
		<?php
		$ignore = array("facebook""bit.ly","about:blank","reduceridestoc","instapaper","weebly");
		$i=1;
	$iframe_array = array();	
foreach($html->find('iframe') as $youTube)
                            {
  $iframe_array[] = $youTube->src;                              
								
								if (strlen(str_replace($ignore, '', $youTube->src)) == strlen($youTube->src)) {
									
                              echo ' <li ><a data-toggle="tab" href="'.$youTube->src.'" target="someFrame" class="myButtons"><b>Server '.$i.'</b></a></li>'; 
								$i++;
								} 

                            }
		 echo '</ul></div>';
		 ?>
        <iframe  name="someFrame" id="someFrame" width="100%" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
7

Pai simuleaza click pe primul “a”, parca asa se face: $("a.myButtons:first").click()

1 Like
8

Nu merge nici cu politia :))

9 
<script>
$(document).ready(function(){
    $("a.myButtons").click(function(event) {
        event.preventDefault();
        
        $("#someFrame").attr("src", $(this).attr("href"));
    })
	
	 $("a.myButtons:first").click();
});
</script>
10

eeee

se pare ca asta a fost solutia ! :smiley:

11

da, doar ca nu-l puneam unde trebuie !