Vidéos

jmglzjmglz Member
dans Entraide
Je constate que l'outil HTML5 de validation d'URL : https://html5.validator.nu/

m'indique l'erreur suivante, pour une vidéo YOUTUBE intégrée dans un blog Pluxml :
[== Indéfini ==]
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

From line 88, column 346; to line 88, column 461

="center"><iframe src="https://www.youtube.com/embed/93lMLEuxSLk" allowfullscreen="" frameborder="0" height="315" width="560"></ifra

Je n'ai pas compris qu'elle est la méthode correcte d'intégration d'une VIDEO dans un blog avec PluXml (Use CSS instead ?).

Quelle est la marche à suivre ?

Réponses

  • chrisschriss Member
    janvier 2016 modifié
    Bonjour,

    'Frameborder' n'est plus valide dans HTML5

    mais utiliser dans le fichier CSS 
    [== CSS ==]
iframe {
border: 0;
}

    mais normalement tu n,en as pas besoin. donc seulement supprimer: frameborder="0"
  • jmglzjmglz Member
    janvier 2016 modifié
    @chriss

    Merci,

    Je comprends donc qu'avant c'était plus simple car il suffisait de copier /coller le code YOUTUBE, alors que maintenant il y a une étape en plus pour avoir un post sans erreur :

    1) copier le code, 2) le modifier en retirant frameborder="0" et 3) le coller

    ;)

    Google / Youtube ne s'est pas adapté au HTML5 ?!
  • chrisschriss Member
    janvier 2016 modifié
    re,

    si mais pas à 100%, il reste des vidéos encore en flash .
    quel est L'Url de la vidéo?
    EDIT:TROUVÉ! la video est bien en HTML5, comment as tu eu ce code? 
    [== HTML ==]
<video src="mediasource:https://www.youtube.com/e9ffe2c5-d0e0-4621-920e-b5e94669023f" class="video-stream html5-main-video" style="width: 640px; height: 360px; left: 0px; top: 0px; transform: none;"></video>
  • jmglzjmglz Member
    janvier 2016 modifié
    Toutes celles que j'avais mis sur le blog http://epress.gleizes.net et que j'ai retirées, exemple :
    [== Indéfini ==]
<br /><div align="center">

    <iframe src="https://www.youtube.com/embed/BkPMbgKC93o" allowfullscreen="" frameborder="0" height="315" width="420">

    </iframe>

</div>

    La plupart de celles disponibles sur YOUTUBE ont cette anomalie !

    autre exemple :
    [== Indéfini ==]
<div style="text-align: center;">


    <br />

</div><iframe src="https://www.youtube.com/embed/uzcN-0Bq1cw" allowfullscreen="" frameborder="0" height="315" width="560">

</iframe>
  • chrisschriss Member
    J'ai trouvé en même temps que tu me répondais :)

    bon cela doit être le plugin de pluXml qui cause cela !! :o
  • jmglzjmglz Member
    janvier 2016 modifié
    Quel plugin ?

    N'y a t'il pas un moyen plus rapide -et sans erreur- en utilisant juste l'URL de la Vidéo ?

    Bon, ce n'est pas très grave mais cela n'est pas très "clean" de constater toutes ces erreurs en moulinant l'outil de vérification des URL ;)
  • chrisschriss Member
    janvier 2016 modifié
    jmglz a écrit:
    Quel plugin ?

    celui que tu utilise pour insérer l'Url ou comment tu procède?
    le mauvais codage n'a pas été créé par Youtube.

    N'y a t'il pas un moyen plus rapide -et sans erreur- en utilisant juste l'URL de la Vidéo ?

    pour le peu que je fais... c,est à la main (codage)
  • jmglzjmglz Member
    janvier 2016 modifié
    J'utilise PLXeditor :)

    je ferai un essai avec l'autre plugin TinyMCE
  • chrisschriss Member
    janvier 2016 modifié
    jmglz a écrit:
    J'utilise PLXeditor :)

    version 1.41?
    ne l'utilisant pas je ne sais si le code est bon.

    EDIT:
    Cela vient bien PLXeditor 
    [== JavaScript ==]
// iframe
		html += '</div>';
		html += '<div id="'+this.textareaId+'-editor" class="editor">';
		html += '<iframe id="'+this.textareaId+'-iframe" class="iframe resizable" frameborder="0"></iframe>';
		html += '<div id="'+this.textareaId+'-footer" class="footer"></div>';
		html += '</div>'; // fin frame
  • jmglzjmglz Member
    Ok merci, je ferai un essai avec l'autre plugin TinyMCE
  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour

    Je vais controler le plugin plxEditor pour que le code généré par les boutons soit valide html5. Laissez moi juste quelques jours le temps de m'en occuper et si nécessaire je mettrai à jour le plugin. ;)

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jmglzjmglz Member
    Merci d'avance @stéphane et bonne soirée.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @jlmgz

    http://www.jeveuxpartir.net/pluxml/index.php?article63/integration-de-videos
    1 vidéo Dailymotion et 1 vidéo Youtube intégrés dans cette page avec TinyMCE.

    Et le code source ressemble à cela : 
    [== HTML ==]
<p><iframe src="//www.dailymotion.com/embed/video/x3j5pd0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>
<p><iframe src="//www.youtube.com/embed/rP3T0Ee6pLU" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>

    A++

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • danielsandanielsan Member
    parfois le httpS pose soucis chez certains modules
  • StéphaneStéphane Member, Former PluXml Project Manager
    jmglz a écrit:
    J'utilise PLXeditor :)

    je ferai un essai avec l'autre plugin TinyMCE

    le problème n'est pas plxEditor car il n'ajoute pas de video à partir d'un bouton. C'est le code qui tu as récupéré à partir de youtube et que tu as collé dans l'éditeur. Donc rien à voir avec plxEditor

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jmglzjmglz Member
    @stépane @bazooka07 Merci à tous les deux, ma réponse à @chriss était donc juste :
    [== Indéfini ==]
Je comprends donc qu'avant c'était plus simple car il suffisait de copier /coller le code YOUTUBE, alors que maintenant il y a une étape en plus pour avoir un post sans erreur :

1) copier le code, 2) le modifier en retirant frameborder="0" et 3) le coller

wink

Google / Youtube ne s'est pas adapté au HTML5 ?!

    Google / Youtube ne s'est pas adapté au HTML5, ce qui ne facilite pas l'intégration des videos YOUTUBE dans un blog sous PluXml (pour l'instant...)

    A+
  • chrisschriss Member
    janvier 2016 modifié
    Stéphane a écrit:
    jmglz a écrit:
    J'utilise PLXeditor :)

    je ferai un essai avec l'autre plugin TinyMCE

    le problème n'est pas plxEditor car il n'ajoute pas de video à partir d'un bouton. C'est le code qui tu as récupéré à partir de youtube et que tu as collé dans l'éditeur. Donc rien à voir avec plxEditor
    en effet, je viens de testé, Il faudrait savoir comment @jmglz a entré ce code.
    et pourtant j'ai trouvé ce bout code donné precedement dans PLXeditor.js

    Et la page donné par @jmglz est conforme HTML5 (code aussi donné plus haut)
  • StéphaneStéphane Member, Former PluXml Project Manager
    chriss a écrit:
    Stéphane a écrit:
    jmglz a écrit:
    J'utilise PLXeditor :)

    je ferai un essai avec l'autre plugin TinyMCE

    le problème n'est pas plxEditor car il n'ajoute pas de video à partir d'un bouton. C'est le code qui tu as récupéré à partir de youtube et que tu as collé dans l'éditeur. Donc rien à voir avec plxEditor

    et pourtant j'ai trouvé le code donné precedement dans PLXeditor.js

    Et la page donné par @jmglz est conforme HTML5 (code déjà donné plus haut)

    Il faudrait savoir comment @jmglz a entré ce code.

    Ha alors je vais regarder une 2ieme fois, j'ai du louper la ligne, car j'ai pas souvenir d'avoir codé le code pour ajouter des videos youtube dans cet editeur.
    Je verifie ça rapidement

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • chrisschriss Member
    Stéphane a écrit:
    chriss a écrit:

    et pourtant j'ai trouvé le code donné precedement dans PLXeditor.js

    Et la page donné par @jmglz est conforme HTML5 (code déjà donné plus haut)

    Il faudrait savoir comment @jmglz a entré ce code.

    Ha alors je vais regarder une 2ieme fois, j'ai du louper la ligne, car j'ai pas souvenir d'avoir codé le code pour ajouter des videos youtube dans cet editeur.
    Je verifie ça rapidement

    Ligne 92 :cool:
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @tous,

    Youtube, Dailymotion et Vimeo proposent tous les trois un code d'intégration pour mettre leurs vidéos dans vos pages HTML.
    Le code d'intégration n'est pas évident à voir sur leur page mais l'accès est facile pour les habitués.
    Parmi les trois, il n'y a que Dailymotion qui ne met pas de frameborder.

    Pour en revenir à l'excellent Tinymce, dans son plugin, il recalcule le code d'intégration par rapport à l'url de la page vidéo que vous êtes en train de mater.
    Voir le tableau urlPatterns dans la page du plugin media sur Github
    Allergiques aux expressions régulières, abstenez-vous de lire ce code. Cela pourrait nuire à votre santé :lol:

    Par contre, Dailymotion est absent.

    A++

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • StéphaneStéphane Member, Former PluXml Project Manager
    chriss a écrit:
    Stéphane a écrit:
    chriss a écrit:

    et pourtant j'ai trouvé le code donné precedement dans PLXeditor.js

    Et la page donné par @jmglz est conforme HTML5 (code déjà donné plus haut)

    Il faudrait savoir comment @jmglz a entré ce code.

    Ha alors je vais regarder une 2ieme fois, j'ai du louper la ligne, car j'ai pas souvenir d'avoir codé le code pour ajouter des videos youtube dans cet editeur.
    Je verifie ça rapidement

    Ligne 92 :cool:

    ok, trouvé. en ligne 95 chez moi (tu n'as peut etre pas la derniere version de plxEditor)
    le frameborder n'est pas celui ajouté quand on mets un video youtube, c'est celui de l'éditeur lui-même.
    ça n'enleve pas le fait effectivement que frameborder n'est pas valide html5
    je vais corriger ça.

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • jmglzjmglz Member
    @stephane @chriss
    [== Indéfini ==]
chriss a écrit :

    Et la page donné par @jmglz est conforme HTML5 (code déjà donné plus haut)

    Il faudrait savoir comment @jmglz a entré ce code.

    En entrant le code YOUTUBE directement dans "HTML" de PLXeditor :)
  • jmglzjmglz Member
    Bonjour @bazooka07

    Pour information j'ai fait un test en utilisant le plugin tinyMCE pour intégrer une nouvelle vidéo DAILYMOTION :

    http://epress.gleizes.net/index.php?article163/l-univers-de-coeur-de-loups

    et j'ai toujours -sauf erreur de ma part- l'indication d'une anomalie par l'outil HTML5 validation :
    Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

    From line 66, column 33; to line 66, column 184

    justify;"><iframe src="//www.dailymotion.com/embed/video/xmbox?autoPlay=1&start=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></ifra
  • StéphaneStéphane Member, Former PluXml Project Manager
    tant qu'il y aura frameborder="0" ça ne sera pas valide. En supprimant cet attribut ça devrait etre bon

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

Connectez-vous ou Inscrivez-vous pour répondre.