E-Entraînement, E-Formation et Educ Pop 2.0

Espace de mutualisation pédagogique de formateurs du ministère des sports, de la jeunesse, de l'éducation populaire et de la vie associative

Tuto spiral – Ouverture en plein écran d’une vidéo youtube incrustée sur un site web spiral


Lorsqu’on incruste une vidéo youtube ou autre sur une page spiral qui elle même est insérée au sein d’un site web, le bouton « plein écran » n’est plus actif. Cela peut parfois être génant… Voici une astuce que vient de me communiquer Eddy Marquès du service ICAP de l’Université de Lyon.

Il n’existe pas d’URL pour le mode « fullscreen ». En revanche, il existe une URL pour une ouverture de la vidéo en « pleine page ».

L’astuce est donc la suivante :

Tout d’abord, incruster la vidéo sur la page du site de manière traditionnelle en utilisant le code d’intégration de la vidéo.

Cliquer sur l’image pour accéder au site
screenhunter_177-sep-16-09-58

Si vous essayez d’ouvrir la vidéo en mode « fullscreen », vous constaterez que la fonction n’est pas active

screenhunter_177-sep-16-10-02

L’astuce consiste alors à ajouter le lien « voir en plein écran » sous la vidéo. Dans le cas présent, nous avons fait le choix de l’ouvrir en pop-up.

Comment créer cette URL ?

Le début de l’URL « plein écran » de Youtube est le suivant : https://youtube.googleapis.com/v/

Ajouter à cette URL l’identifiant de la vidéo. Cet identifiant ce trouve dans l’URL « standard » de la vidéo. Dans le cas présent « uVytv4Q1QVY »

screenhunter_177-sep-16-10-23

L’URL « plein écran » est donc la suivante : https://youtube.googleapis.com/v/uVytv4Q1QVY

Coller ce lien sous la vidéo et ouvrez le dans un autre onglet… en pop-up… et le tour est joué.

Exemple


Cliquer ici pour voir la vidéo en question en « plein écran »

Bonus


En ajoutant « ?autoplay=1 » à la fin de l’URL, la vidéo s’ouvre en « plein écran » et se lance automatiquement… Exemple sur cette vidéo

Cliquer ici pour voir la vidéo en question en « plein écran »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :