Comment convertir une URL de vidéo YouTube en code iframe, en utilisant jQuery au chargement de la page?

J'ai un WYSIWYG textarea, et parfois, l'utilisateur peut entrer une url youtube dans la boîte. Sur le côté serveur, il y a des html des filtres pour éviter les "nuisibles" code d'être enregistré.

Donc, au lieu de cela, je voudrais juste garder le code du serveur, et d'exécuter un jQuery document prêt événement qui recherche un bloc de texte d'un lien youtube, et la convertit à l'iframe code embed.

J'imagine qu'il serait regex, mais je suis absolument horrible avec la regex (à un certain moment, j'ai vraiment besoin de s'asseoir et de les étudier).

Deux types de liens youtube:

http://www.youtube.com/watch?v=t-ZRX8984sc

ou

http://youtu.be/t-ZRX8984sc

source d'informationauteur Chaddeus | 2011-08-24

  1. 31

    Cette regex va ramasser les Url et les remplacer par les intégrer de balisage (juste un iframe selon ce que YouTube actuellement sorties).

    str.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');

    jsFiddle.

    Cependant, cela peut marquer des choses telles que les gestionnaires d'événements attachés avec de vieilles méthodes.

    C'est un peu plus compliqué, mais le meilleur serait de travailler avec des nœuds de texte seulement.

    Qui devrait ressembler à quelque chose comme ça...

    $('body').contents().each(function() {

    //Skip non text nodes.
    if (this.nodeType !== 3) {
        return true;
    }

    //Grab text
    var matches = this.data.match(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g);

    if (!matches) {
        return true;
    }

    var iframe = $('<iframe width="420" height="345" frameborder="0" allowfullscreen />', {
        src: 'http://www.youtube.com/embed/' + matches[1]
    });

    iframe.insertAfter(this);

    $(this).remove();

});

    Noter que cette insère après le nœud de texte.

  2. 4
    var yturl= /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([\w\-]{10,12})(?:&feature=related)?(?:[\w\-]{0})?/g;
var ytplayer= '<iframe width="640" height="360" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
str.replace(yturl, ytplayer);

    Assurer le bon fonctionnement, à l'organisation de l'éditeur WYSIWYG