Transformer liens youtube en iframe

Version imprimable

Bonjour,
j'essaie de transformer des liens youtube sur une page en iframe...

voici le code qui fonctionne pour un lien :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"><!-- DEBUT script pour liens youtube -->
$(document).ready(function () 
{
	$("a[href^='http://www.youtube']").each( function () 
		{
				$(this).html(function(i, html) {
						return html.replace(i, "<iframe width='300' height='150' src='https://www.youtube-nocookie.com/embed/1234567890' frameborder='0' allowfullscreen></iframe>");	
						}); 
		});
});
</script><!-- FIN script pour liens youtube -->

et je voudrais le faire pour tous les liens présents sur la page et là rien ne se passe...:calim2:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript"><!-- DEBUT script pour liens youtube -->
$(document).ready(function () 
{
	$("a[href^='http://www.youtube']").each( function () 
		{
			val source_youtube = $(this).val();
				$(this).html(function(i, html) {
						return html.replace(i, "<iframe width='300' height='150' src='source_youtube' frameborder='0' allowfullscreen></iframe>");	
						}); 
		});
});
</script><!-- FIN script pour liens youtube -->

je dois pas être loin, mais je dois avoir oublié un truc ?
Merci.

Hello,

tu n'envoies pas la variable source_youtube dans ta ligne mais le texte source_youtube. il faudrait :
Code:

1 2 return html.replace(i, "<iframe width='300' height='150' src='" + source_youtube + "' frameborder='0' allowfullscreen></iframe>");

Merci manu_71,
code modifié mais qui me met des iframe mais sans rien dedans ! :cry:
au passage, j'avais mis val au lieu de var...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript"><!-- DEBUT script pour liens youtube -->
$(document).ready(function () 
{
	$("a[href^='http://www.youtube']").each( function () 
		{
			var source_youtube = $(this).val();
				$(this).html(function(i, html) {
						return html.replace(i, "<iframe width='300' height='150' src='"+source_youtube+"' frameborder='0' allowfullscreen></iframe>");
						}); 
		});
});
</script><!-- FIN script pour liens youtube -->

26/01/2013, 14h53
SpaceFrog

Code:

var source_youtube = $(this).val();

depuis quand une balise a-t-elle un value ???
26/01/2013, 15h55
manu_71
ha oui j'avais pas fait attention au reste du code.
Tu récupères val() de ta balise <a>... Il faut récupérer le href donc.
Code:

1 2 $(this).attr("href")
26/01/2013, 16h24
fazpedro

j'ai mis :

Code:

var source_youtube = $(this).attr("href");

mais c'est pareil !
26/01/2013, 16h46
manu_71

Je ne suis pas sûr de moi (je suis pas un expert) mais il me semble que ta variable n'est pas disponible dans ta fonction suivante (portée locale). Tu peux tester ça avec des alert(source_youtube) (un juste après avoir déclarer ta variable pour voir si déjà tu récupères bien le href et un autre juste avant ton return pour voir si elle est dispo à cet endroit). Si le problème vient de là, soit tu passes ta variable dans ta function, soit tu peux la déclarer de manière implicite (sans utiliser var)...

ceci pourrait théoriquement fonctionner...
Code:

1 2 3 4 5 6 7 $("a[href^='http://www.youtube']").each(function(){ source= $(this).attr('href'); swap=$('<iframe/>').attr('src',source).css({"height": "200px","width":"300px", "border":"solid 1px red"}); $(this).after(swap); alert(swap.attr('scr')) $(this).remove(); })
MAIS youtube ne permet pas de framer les liens directemlent de la sorte il faut passer par un lien embed ...

En approfondissant un peu on peut recuperer la ref de la video en param v du get et concatener un nouveau lien embed pour youtube qui cette fois fonctionne en src d'un iframe
Code:

1 2 3 4 5 6 7 8 $(function(){ $("a[href^='http://www.youtube']").each(function(){ source="http://www.youtube.com/embed/"+$(this).attr('href').match(/v=([^&]+)/)[1]; alert(source) swap=$('<iframe/>').attr('src',source).css({"height": "200px","width":"300px", "border":"solid 1px red"}); $(this).replaceWith(swap) }) })

testé avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
<title>Nouvelle page 1</title>
<style type="text/css">
</style>
<script type='text/javascript' src="http://code.jquery.com/jquery.js"></script>
<script type='text/javascript'>
 
$(function(){
$("a[href^='http://www.youtube']").each(function(){
source="http://www.youtube.com/embed/"+$(this).attr('href').match(/v=([^&]+)/)[1];
swap=$('<iframe/>').attr('src',source).css({"height": "200px","width":"300px", "border":"solid 1px red"});
$(this).replaceWith(swap)  
})
})
</script>
</head>
<body>
<a href="http://www.youtube.com/watch?v=6XA0uZcDO9Y&feature=youtu.be">tortue</a>
<a href="http://www.youtube.com/watch?v=2gyxeXW_2T8">mike</a>
<a href="http://www.youtube.com/watch?v=RylxBtEM0sI">hip hop uke</a>
</body>
</html>

Au passage appréciez la seconde video ...
La dernière est dangereuse !!

Merci SpaceFrog : cela fonctionne à merveille ! :ccool:

Code :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script type='text/javascript'>
$(function(){
$("a[href^='http://www.youtube']").each(function(){
source="https://www.youtube-nocookie.com/embed/"+$(this).attr('href').match(/v=([^&]+)/)[1];
swap=$('<iframe />').attr('src',source).css({"height": "150x","width":"250px", "border":"solid 4px red","border":"0", "margin":"0", "padding":"0"});
$(this).replaceWith(swap)  
})
})
</script>