[Tuto] Intégration YouTube

Voir le sujet précédent Voir le sujet suivant Aller en bas

[Tuto] Intégration YouTube

Message par Allan "Beat" Hallen le Ven 14 Oct 2016, 01:18

Yo.

Alors ouais, pour certains, ça semble con. Mais pour d'autres, ça peut servir. En tout cas, vu qu'on m'a demandé à plusieurs reprises de bazarder à nouveau ce tuto. J'me suis décidé à enfin le remettre, même si j'avais pas envie d'rebalancer un tuto pour qu'il soit supprimé pour des raisons un peu obscures. J'fais l'effort, c'est beau, du coup svp le staff, faut pas supprimer quand Mr. Fondateur essaye d'aider les membres.

ALORS, ce tuto, c'est quoi le but ?
Tout simplement, foutre une vidéo YouTube sur le forum, mais pas au format vidéo comme ça :



Nan, plus dans un format barre de lecture (Pour tout ce qui est musique et tout ça, c'est quand même plus intéressant pour le RP.

Alors pour commencer, on va un peu observer la gueule du code HTML d'une vidéo YouTube quand les options sont activés, ça sera un bon point de départ.

Code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/7Iweue-OcMo?rel=0" frameborder="0" allowfullscreen></iframe>

Bien bien bien, dans cette portion de code, il y a officiellement 2 choses importantes à voir, et à modifier.
Les deux variables suivantes :

width="560" => Définit la longueur du cadre de la vidéo
height="315" => Définit la hauteur du cadre de la vidéo

Bien, si vous modifiez ces valeurs, vous obtenez une fenêtre différente, genre en mettant width="700" et height="400" vous vous retrouvez bien sûr avec une fenêtre bien plus longue



Bref, vous pouvez vous amuser à tester avec différentes tailles pour vous familiariser avec le truc. Mais nous, ce qu'on cherche à faire, je vous le rappelle, c'est de faire une barre de lecture uniquement.
Pour cela, rien de bien dur wow, il suffit de changer la valeur de height="taille" par height="30". Pour la longueur, il vous suffira de l'adapter à votre code si vous en avez un, ou au forum si vous n'en avez pas.

Si vous n'avez pas de code, vous pouvez garder la valeur de base du width="taille", ça passera bien.
Voici donc ce que ça donne si vous mettez la hauteur à 30 :



Voilà, donc pour l'instant normalement, si vous avez réussi votre manip, vous devriez avoir ça comme code :

Code:
<iframe width="560" height="30" src="https://www.youtube.com/embed/7Iweue-OcMo?rel=0" frameborder="0" allowfullscreen></iframe>

Mais le réel truc, c'est que l'intégration via code HTML d'une vidéo YouTube de cette façon pose une problème assez gênant, peut-être que vous ne l'avez pas encore remarqué, mais quand vous intégrez une vidéo de la façon au-dessus, le titre de la vidéo nous empêche de lire la musique, de lancer la vidéo hein, vous pouvez bien le voir en effet. Du coup le seul moyen avec le code dans cet état, c'est d'ouvrir la page YouTube en cliquant sur le titre de la vidéo... Pas pratique hein ?

Ouais hein, mais vous en faites pas, j'suis un petit bosseur, et j'pouvais pas accepter ça, du coup j'ai cherché, pendant 2 minutes hein ouais, puis j'ai finalement trouvé LA SOLUTION ! (Sauf que la solution, j'la connais depuis 1 an, c'était une phrase de l'ancien tuto qui collait bien et qui était marrante lol.)

Tout est simple en fait, quand vous êtes sur la page YouTube d'une vidéo, vous allez sur l'onglet "Partager" et après "Intégrer" n'est-ce pas ?
Bien une fois là, vous avez votre code foiré qui apparaît, et pour le corriger, c'est simple, vous cliquez sur le petit "Plus" en dessous du code, ceci va vous ouvrir les options de personnalisation du code.
Bien, donc vous avez l'aperçu de ce que va donner votre code, et en dessous, vous avez des options.

"Taille de la vidéo :
Afficher les suggestions de vidéos à la fin de la lecture
Afficher les commandes du lecteur
Afficher le titre de la vidéo et les actions du lecteur
Activer le mode de confidentialité avancé"

Tout ce qu'il faut faire, c'est ne cocher que l'option "Afficher les commandes du lecteur", et de cette façon, si on prend la taille de base de la vidéo, ça donne :



Le code :
Code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/RFqsb_mk2v8?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Puis là, regardez, c'est beau, tout à disparu de la vidéo, sauf le bouton play et la barre de lecture, c'est pas ce qu'on cherchais ? Je crois bien que si !
Vous pouvez comparer le code du début avec celui-là, mais perso ça sert pas à grand chose, normalement, une fois que vous avez coché ou décoché des options, c'est enregistré, au pire, dans le doute, vérifiez mais bon.

Bref, si on remet la vidéo au format barre de lecture, donc, avec 30 de hauteur, ça donne ça :



Et donc, si vous avez tout suivi, vous avez ce code lol :
Code:
<iframe width="560" height="30" src="https://www.youtube.com/embed/RFqsb_mk2v8?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

C'est dingue la technologie quand même. Vous pouvez maintenant tous mettre des musiques YouTube sous la forme d'une simple barre de lecture ! Vous pouvez désormais agrémenter vos RPs d'une douce mélodie, d'un dubstep déjanté, d'un rock endiablé, d'un rap foiré ou d'une chanson paillarde du meilleur goût.

Voilà voilà, c'est tout pour moi =)
J'espère que ça aura servi aux quelques personnes qui savaient pas comment faire, je souhaite une longue vie à ce tuto et j'vous fais la biz.

Bon continuation dan la vi, bsx bsx.
Allé
Salu


Never forget:


avatar
Allan "Beat" Hallen

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Intégration YouTube

Message par Invité le Jeu 20 Oct 2016, 17:04

M'ci chef euh Allan pardon.

Invité
Invité

Revenir en haut Aller en bas

Re: [Tuto] Intégration YouTube

Message par Shulie le Mer 19 Avr 2017, 15:42

Merci bien, ça m'a bien servi :D


 
avatar
Shulie

Fiche perso'
Idéologie Dominante: 2
Niveau: 0
Exp:
100/100  (100/100)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [Tuto] Intégration YouTube

Message par Contenu sponsorisé


Contenu sponsorisé

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum