Discussion :

[fazpedro]

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

voici le code qui fonctionne pour un lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[manu_71]

Hello,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[fazpedro]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 -->

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

depuis quand une balise a-t-elle un value ???

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(this).attr("href")

[fazpedro]

j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais c'est pareil !

[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)...

[SpaceFrog]

ceci pourrait théoriquement fonctionner...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)  
})
})

[SpaceFrog]

testé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!

[fazpedro]

Merci SpaceFrog : cela fonctionne à merveille !

Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>