Vidéo YouTube et Fancybox

Bonjour,

j'ai fait un site pour un groupe avec une page vidéo. Les vidéos viennent de YouTube, Dailymotion ou Viméo.

J'ai décidé d'utiliser Fancybox.

Après avoir essayé de comprendre comment il fallait que j’intègre la vidéo YouTube comme sur le site de Fancybox : http://fancybox.net/ (en bas dans la liste Various Examples, « Youtube (iframe) », je précise que cet exemple n'est pas dans la doc à télécharger...) et n'ayant pas réussi à le faire, je me suis tourné vers un tuto du site Le Pingouin des Alpes : http://pingouindesalpes.com/?article107/une-video-dans-fancybox

Et là, ô miracle, cela fonctionne.

MAIS. Car il y'a évidemment un MAIS...

La vidéo YouTube s'ouvre comme il faut dans la Fancybox mais on ne peut pas la mettre en plein écran... De plus, je trouve le code bien compliqué en comparaison de ce que le site de Fancybox proposait pour intégrer la vidéo...

Mon code :

<div class="video">
                                       <div style="display:none">
                                        <div id="video" >
                                        <object type="application/x-shockwave-flash" width="580" height="360" 
                                            data="http://www.youtube.com/watch?v=FAMCGJ2mQOc&hd=1?version=3&amp;hl=fr_FR"> 
                                        <param name="movie" value="http://www.youtube.com/watch?v=FAMCGJ2mQOc&hd=1?version=3&amp;hl=fr_FR" /> 
                                        <param name="allowFullScreen" value="true" /> 
                                        </object> 
                                        </div> 
                                        </div>
    <a class="cinematographe" href="http://www.youtube.com/watch?v=FAMCGJ2mQOc&hd=1?autoplay=1"><img src="images/video-23-1.jpg" alt="Vidéo du concert de Calliphonists au 23" title="Vidéo du concert de Calliphonists au 23"/></a>
    <p>
Extrait du concert au 23, le 2 avril 2011.
	</p>
    </div> <!--fin video-->

Dans l'exemple du site Fancybox, le code HTML se résume à :

<li><a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a></li>

Mais je ne trouve pas la fameuse class="various iframe" dans le js : http://fancybox.net/js/web.js?m=20100203

Vous l'aurez compris... Je suis un petit peu paumé...
Quelqu'un d'intelligent pourrait-il m'aider ?



D'avance, merci.
Modifié par Douce Propagande (10 May 2012 - 09:27)

Je ne connais pas cet outil en particulier mais :
- iframe est une option (voir advanced options dans la doc), pas une classe
- la classe various est bien présente dans le script d'init

$(".various").fancybox({
		'transitionIn'	: 'none',
		'transitionOut'	: 'none'
	});

Modifié par paolo (09 May 2012 - 22:29)

salut oserais je dire un tout petit peu paumé... et pas doué sur le web

en effet dans la doc fancy il y a peut, masi pour ton cas il y a quand même ceci :

$("#tip4").click(function() {
	$.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});

suffit de regarder là => http://fancybox.net/blog

et sinon en cherchant un peu dans le source de la page d'accueil on trouve ceci => http://fancybox.net/js/web.js?m=20100203

avec tout les cas en js....

bref des fois faut chercher un peu

Merci de m'appeler tâcheron ! Ça fait toujours plaisir...

Si je demandais, c'est que je n'avais pas trouvé, et que j'ai fait des tas d'essais avant... Je suis graphiste à la base, l'apprentissage du web et de ses turpitudes codifiées se fait leeeentement pour moi. J'avais bêtement oublié que les forums sont plein de gens qui disent « cherche sur Google », « cherche mieux », « ta question n'est pas au bon endroit », etc.

Sinon, le « 'allowfullscreen' : 'true' » ne change rien à mon problème... La vidéo YouTube reste désespérément à la même taille... Je mets ça sur le compte de mon incompétence et retourne chercher tout seul.

Merci à vous deux en tout cas.
Modifié par Douce Propagande (10 May 2012 - 09:11)

Mais non pas tâcheron... quand même

Mais bon tu le dis tu es graphiste

Je suis développeur à la base on a donc pas les mêmes réflexes...

A chacun son métier hein

Bon le allowfull screen est là uniquement pour que la marge blanche de fancybox disparaisse, pas pour que la vidéo soit plus grande...

Maintenant que tu as le bon code, et que tu l'as mis en place, explique ce que tu veux faire, et ce que tu as fait est peut être en ligne ?? pour voir

J'étais vexé, parce que je suis graphiste et que les graphistes se vexent.

Bref, j'ai tâtonné en reprenant exactement ce qu'il y'avait sur la page Fancybox...
Il semblerait que ce .js : http://www.fancybox.net/js/web.js?m=20100203 soit la cause de la réussite...

La marge blanche étant justement mon problème maintenant, parce que je veux la virer, je vais donc tenter le fameux allow fullscreen... Et... (le truc se passe en direct...)

Et... non. Je ne vois pas où est-ce que je vire cette marge blanche...
Modifié par Douce Propagande (10 May 2012 - 10:18)

Mise en situation : http://calliphonists.free.fr/videos.html

ah oui non mais ok.... bon..... '

reprenons.... les exemples de fancybox fonctionne car ils sont dans leur contexte, et tu essayes de reprendre ce contexte à ton compte

non il faut que tu insère directement dans TON code le bout utile... pas le reste

donc place ceci en lieu et place du chargement du js de fancy

<script type="text/javascript">
$(function(){
$(".videoutub").click(function() {
	$.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});
});
<script>

j'ai adapté à ton code enfin je crois

remplace ceci :

<a class="various iframe"

par cela

<a class="videoutub"

et dégage ça de ton code :

<script type="text/javascript" src="js/web.js?m=20100203"></script>

et j'oubliais jQuery est en version 1.7 met à jour

Je viens de tester le code que tu as modifié pour moi (un grand merci d'ailleurs), mais ça ne fonctionne pas... Qu'est-ce que j'ai encore mal fait ?!

http://calliphonists.free.fr/videos2.html

J'ai mis Jquery à jour au passage... Ça faisait longtemps que je n'avais pas touché à ce site...

ok au temps pour moi, j'ai merdu

bah oui j'ai foncondu swf et you tube, car il ya 2 façon d'appeler des vidéos sur youtube et dans ton cas c'est ce code qu'il faut :

$.fancybox({

			'padding'		: 0,

			'transitionIn'	: 'none',

			'transitionOut'	: 'none',

			'title'			: this.title,

			'href'			: this.href,

			'type'			: 'iframe'
		});

ce n'est que la partie du fancybox qui est à remplacer pour tous le reste c'est bon....

en revanche je te dirai de ne pas perdre l'autre car il fonctionne pour l'autre méthode d'appel des vidéos on sait jamais ça pourrait servir

et désolé de t'avoir enduit d'horreur lol

Nickel ! Ça marche !

Je te remercie d'avoir pris du temps pour m'aider !

mais de rien, fancybox est un petit système qui me plait beaucoup et est très sympa à utiliser avec des tonnes de possibilités

penses à passer le sujet en résolu