Vidéos

jmglz · janvier 2016

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 ?

chriss · janvier 2016

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"

jmglz · janvier 2016

@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 ?!

chriss · janvier 2016

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>

jmglz · janvier 2016

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>

chriss · janvier 2016

J'ai trouvé en même temps que tu me répondais

bon cela doit être le plugin de pluXml qui cause cela !!

jmglz · janvier 2016

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

chriss · janvier 2016

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)

jmglz · janvier 2016

J'utilise PLXeditor

je ferai un essai avec l'autre plugin TinyMCE

chriss · janvier 2016

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

jmglz · janvier 2016

Ok merci, je ferai un essai avec l'autre plugin TinyMCE

Stéphane · janvier 2016

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.

jmglz · janvier 2016

Merci d'avance @stéphane et bonne soirée.

bazooka07 · janvier 2016

@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++

danielsan · janvier 2016

parfois le httpS pose soucis chez certains modules

Stéphane · janvier 2016

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

jmglz · janvier 2016

@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+

chriss · janvier 2016

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éphane · janvier 2016

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

chriss · janvier 2016

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:

bazooka07 · janvier 2016

@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é

Par contre, Dailymotion est absent.

A++

Stéphane · janvier 2016

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.

jmglz · janvier 2016

@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

jmglz · janvier 2016

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éphane · janvier 2016

tant qu'il y aura frameborder="0" ça ne sera pas valide. En supprimant cet attribut ça devrait etre bon

Vidéos

Réponses