Insérer Vidéo

[Claude VIQUESNEL]

Bonjour,

 J'utilise le code Html pour écrire mes articles et j'y insère parfois une vidéo.

Pour le moment en mode html  dans la barre du menu, on peut cliquer sur la petite icône 

Deux possibilités : 

1. Importer depuis Youtube
2. Importer depuis l'ordinateur

Depuis Youtube pas de problème mais la représentation de leur iframe n'est pas top, à mon goût.

Depuis l'ordinateur, je peux sélectionner la vidéo 

<div class="separator" style="clear: both; text-align: center;"><object class="BLOG_video_class" contentid="5a164733846d3da0" width="400" height="322" id="BLOG_video-5a164733846d3da0" aria-label="Importer la vidéo"></object></div>

mais rien ne s'affiche

Ma question : existe t'il un code autre que celui proposer par Google qui permettrait d'insérer une vidéo sans passer par Youtube svp ?

Vous en  remerciant par avance

[Jean-Luc Massias]

🧙‍♂️ Si tu veux insérer une vidéo hébergée toi-même (par exemple .mp4)
C'est un peu plus "low-tech", mais très élégant pour l'esprit libre :

<video width="640" height="360" controls>
  <source src="https://tonsite.com/chemin/vers/ta_video.mp4" type="video/mp4">
  Ton navigateur ne supporte pas la balise vidéo.
</video>

🎨 Tu peux ajouter poster="image.jpg" dans la balise <video> pour afficher une image avant lecture :

html
Copier
Modifier
<video width="640" height="360" controls poster="https://tonsite.com/image_apercu.jpg">

--
✨ La Communauté vit grâce à ses membres ! ✨
C'est vous qui construisez cet espace à votre image. Voici comment participer activement :
 
💬 Poser des questions : Vous ne trouvez pas de réponse ? Créez un nouveau sujet et laissez la communauté vous aider.
🤝 Aider les autres : Un sujet n'a pas encore de réponse et vous avez la solution ? Partagez votre expertise !
🙏 Remercier : Un membre vous a donné la bonne réponse ? Exprimez votre gratitude en répondant ou en laissant un petit mot sympa.
🗣️ Participer : Une Communauté doit être vivante. Apportez votre point de vue et enrichissez les discussions en cours.
 
Merci de rendre cette Communauté plus forte et plus accueillante chaque jour ! 💖
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes "Forum Blogger Ambassade Francophone".
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse blogger-fr+...@googlegroups.com.
Pour afficher cette discussion, accédez à https://groups.google.com/d/msgid/blogger-fr/9f5b9dba-2c82-4d5b-a0b0-4dbf36e068a4n%40googlegroups.com.

[Claude VIQUESNEL]

Merci pour ta réponse, je viens de tester mais ça ne fonctionne pas. J'ai essayé avec la vidéo sur Drive et dans Google photo.

Excellente fin de semaine

[Soraya Lambrechts]

Bonjour,

Pour un affichage personnalisé, il existe l'API player YouTube qui offre quelques possibilités.

Démo a insérer dans le html d'un article :

<!-- La vidéo s'affichera dans ce container -->

<div id="player"></div>

<!-- Affichage de la barre de contrôle -->

<div class="custom-controls">
  <button onclick="player.playVideo()">▶️</button>
  <button onclick="player.pauseVideo()">⏸</button>
  <button onclick="player.stopVideo()">⏹</button>
  <button onclick="seekTo(60)">⏩ 1:00</button>
  <button onclick="toggleMute()">🔇</button>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(this.value)">
</div>

<!-- Le script qui gère les paramètres -->

<script>
  let player;
  let isMuted = false;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: '_V7Cmby8GSo', /* ID VIDEO */
      playerVars: {
        controls: 0,
        modestbranding: 1,
        rel: 0,
        fs: 0
      },
      events: {
        onReady: onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    player.setVolume(50);
  }

  function seekTo(seconds) {
    player.seekTo(seconds, true);
  }

  function toggleMute() {
    isMuted ? player.unMute() : player.mute();
    isMuted = !isMuted;
  }

  function setVolume(value) {
    player.setVolume(value);
  }
</script>

<script src="https://www.youtube.com/iframe_api"></script>

Et la partie CSS pour la barre de contrôle (à placer dans le thème XML ou dans le html de l'article) :

<style>
  .custom-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
  }

  .custom-controls button,
  .custom-controls input[type="range"] {
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
    border: none;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
  }

  .custom-controls button:hover {
    background: #ccc;
  }
</style>

Vous trouverez un exemple de ce qu'on peut construire avec cet API sur le blog de NP.

Best :)

[Claude VIQUESNEL]

Merci Sora...

  Si j'ai bien compris je mets

<div class="custom-controls">
  <button onclick="player.playVideo()">▶️</button>
  <button onclick="player.pauseVideo()">⏸</button>
  <button onclick="player.stopVideo()">⏹</button>
  <button onclick="seekTo(60)">⏩ 1:00</button>
  <button onclick="toggleMute()">🔇</button>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(this.value)">
</div>

dans <div id="player"></div>

Et 

.custom-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: center;
  }

  .custom-controls button,
  .custom-controls input[type="range"] {
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
    border: none;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
  }

  .custom-controls button:hover {
    background: #ccc;
  }

dans le css du blog

Merci

[Forum Blogger Ambassade Francophone]

En gros, non.

<div id="player"></div>  est le container de la vidéo. Lorsque le script s’exécutera, il va repérer cette balise et l'utiliser pour y intégrer la vidéo.

Quant à l'ensemble <div class="custom-controls">...</div> , c'est le html de la barre de contrôle. Elle peut être placée en-dessous ou au-dessus du container "player".

Pour la partie javascript, tu as 2 possibilités :

1. si tu ne l'utilise qu'une seule fois, tu le mets à la fin du html de l'article concerné.

2. si tu l'utilise pour plusieurs articles, autant le mettre à la fin du code xml du thème (avant </body>).

2.1. Si tu optes pour la 2e solution, il faut modifier la ligne videoId: '_V7Cmby8GSo', /* ID VIDEO */  en remplaçant l'id de la vidéo par un nom de variable (sans quote), par exemple : videoId: postVideoId, /* ID VIDEO */

2.2. Et à la fin du html des articles où tu souhaites ajouter une vidéo, tu déclares cette variable : <script>const postVideoId = '_V7Cmby8GSo'</script> (en remplaçant l'identifiant de la vidéo par celle que tu auras choisi)

Pour la partie CSS, tu l'ajoutes dans le code xml du thème, avant : ]]></b:skin>

Si tu as des questions, n'hésite pas. ;)

[Claude VIQUESNEL]

Merci beaucoup 

Je vais tester ça et je reviendrai pour te dire si j'y suis arrivé. 

Bien à toi 

Envoyé à partir de Outlook pour Android

---

From: Forum Blogger Ambassade Francophone <blogg...@googlegroups.com>
Sent: Saturday, May 24, 2025 8:02:52 PM
To: Forum Blogger Ambassade Francophone <blogg...@googlegroups.com>
Subject: Re: [FORUM BLOGGER FR] Insérer Vidéo

 

--

✨ La Communauté vit grâce à ses membres ! ✨
C'est vous qui construisez cet espace à votre image. Voici comment participer activement :
 
💬 Poser des questions : Vous ne trouvez pas de réponse ? Créez un nouveau sujet et laissez la communauté vous aider.
🤝 Aider les autres : Un sujet n'a pas encore de réponse et vous avez la solution ? Partagez votre expertise !
🙏 Remercier : Un membre vous a donné la bonne réponse ? Exprimez votre gratitude en répondant ou en laissant un petit mot sympa.
🗣️ Participer : Une Communauté doit être vivante. Apportez votre point de vue et enrichissez les discussions en cours.
 
Merci de rendre cette Communauté plus forte et plus accueillante chaque jour ! 💖
---

Vous recevez ce message, car vous êtes abonné à un sujet dans le groupe Google Groupes "Forum Blogger Ambassade Francophone".
Pour vous désabonner de ce sujet, visitez le site https://groups.google.com/d/topic/blogger-fr/8KvSf7YfdmE/unsubscribe.
Pour vous désabonner de ce groupe et de tous ses sujets, envoyez un e-mail à l'adresse blogger-fr+...@googlegroups.com.
Pour afficher cette discussion, accédez à https://groups.google.com/d/msgid/blogger-fr/f16b38ab-76ca-43b7-a632-b5e910e9bfc9n%40googlegroups.com.

[Claude VIQUESNEL]

Bonjour

Je reviens vers toi car j'ai un souci avec le videoId, où le trouver si la vidéo est dans Google Drive ou si elle est dans Youtube stp ?

Merci d'avance

[Soraya Lambrechts]

Google drive utilise des redirections qui ne peuvent pas fonctionner avec l'api player.

L'ID d'une vidéo youtube peut être trouvé dans l'url de la page vidéo youtube. Par exemple : https://www.youtube.com/watch?v=G7KNmW9a75Y&ab_channel=MileyCyrusVEVO

Sur la même page, l'ID est également présent dans l'url de partage et le code embed (intégré)

[Claude VIQUESNEL]

Merci Sora... pour le retour

La vidéo Youtube est https://www.youtube.com/watch?v=dcmhK3J34KE

 Voilà ce que j'ai mis dans mon article d'essai

<div id="player"></div>

<div class="custom-controls">
  <button onclick="player.playVideo()">▶️</button>
  <button onclick="player.pauseVideo()">⏸</button>
  <button onclick="player.stopVideo()">⏹</button>
  <button onclick="seekTo(60)">⏩ 1:00</button>
  <button onclick="toggleMute()">🔇</button>
  <input type="range" min="0" max="100" step="1" onchange="setVolume(this.value)">
</div>

<script>
  let player;
  let isMuted = false;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',

      videoId: 'dcmhK3J34KE'

      playerVars: {
        controls: 0,
        modestbranding: 1,
        rel: 0,
        fs: 0
      },
      events: {
        onReady: onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    player.setVolume(50);
  }

  function seekTo(seconds) {
    player.seekTo(seconds, true);
  }

  function toggleMute() {
    isMuted ? player.unMute() : player.mute();
    isMuted = !isMuted;
  }

  function setVolume(value) {
    player.setVolume(value);
  }
</script>

<script src="https://www.youtube.com/iframe_api"></script>

 Voilà ce que j'ai sur l'article, il y a bien le lecteur mais pas la vidéo

😩

[Soraya Lambrechts]

Il y a une petite erreur dans le javascript au niveau de la ligne de l'ID. Ajoute une virgule après --> videoId: 'dcmhK3J34KE',

;)

[Claude VIQUESNEL]

Génial ,merci beaucoup 👏👏👏👏