JSFiddle - React, Tailwind, and code Playground

by GlauberRocha

HTML

<button>Change</button>
<iframe src="http://www.canal-u.tv/video/cinematheque_francaise/embed.1/la_geographie_imaginaire_des_films_de_tim_burton_de_burbank_a_new_holland_conference_de_matthieu_orlean.9766?width=550&amp;height=340" allowfullscreen="" frameborder="0" height="340" width="550" scrolling="no"></iframe>

CSS

iframe {
    margin: 12px;
    outline: solid 1px red;
}

button {
    display: block;
}

JavaScript

/**
 * TEST du nouveau code d'intégration Canal-U.
 * Modifie aléatoirement la dimension de l'iframe en modifiant dynamiquement ses attributs width et height.
 * L'attribut src est également mis à jour car il inclut les informations de width et height.
 * La Cinémathèque française
 * 18/10/12
 */
$("button").on("click", function () {
    var
    $iframe = $("iframe"),
        url = $iframe.attr("src"),
        w = Math.floor(450 * Math.random() + 150),
        h = Math.floor(w / 1.7405 + 24);

    url = url.replace(/(width=)([\d]+)/gi, "$1" + w);
    url = url.replace(/(height=)([\d]+)/gi, "$1" + h);

    $iframe.attr("width", w);
    $iframe.attr("height", h);
    $iframe.attr("src", url);
});