JavaScript: sostituire gli iframe dei video con link HTML

Gli iframe di YouTube e Vimeo possono essere sostituiti con link HTML tramite JavaScript.

La soluzione รจ la seguente:


'use strict';

class Replacer {
    constructor() {
        this.iframes = document.querySelectorAll('iframe');
        if(this.iframes.length > 0) {
            this.init();
        }
    }
    init() {

        const youTubeRegExp  = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        const vimeoRegExp = /\d+/;

        this.iframes.forEach(el => {
            let src = el.getAttribute('src');
            let link = document.createElement('a');
            link.innerText = 'Video';

            if(youTubeRegExp.test(src)) {
                let match = src.match(youTubeRegExp);
                link.href = `https://youtu.be/${match[7]}`;
            } else if(src.includes('vimeo')) {
                let match = src.match(vimeoRegExp);
                link.href = `https://vimeo.com/${match[0]}`;
            }

            el.parentNode.replaceChild(link, el);
        });
    }
}

Esempio d'uso:


document.addEventListener('DOMContentLoaded', () => {
	const replacer = new Replacer();
}, false);

Torna su