Bonsoir à toutes et à tous !
Ce soir, je vous propose le podcast tant attendu, le fameux podcast sur l’autoresize des vidéos ! À noter toutefois que pour que ce code fonctionne, il faut rajouter un code php « max-width » 100% et le code jQuery suivant dans le fichier « jquery.mystique.js » :
// fonction créée et ajoutée par Heeboo
// conçu pour le blog de LoKan (lokan.fr)
function resize_object(monobjet, style) {
if (style != null) {
longueur = monobjet.parentNode.offsetWidth;
if (!monobjet.initWidth) monobjet.initWidth = monobjet.width;
if (!monobjet.initHeight) monobjet.initHeight = monobjet.height;
}
else {
longueur = monobjet.parentNode.parentNode.offsetWidth;
if (!monobjet.initWidth) monobjet.initWidth = monobjet.parentNode.width;
if (!monobjet.initHeight) monobjet.initHeight = monobjet.parentNode.height;
}
if (longueur < monobjet.initWidth){
ratio = monobjet.initWidth / monobjet.initHeight;
hauteur = longueur / ratio;
if (style != null) {
monobjet.parentNode.width = monobjet.width = longueur+ »px »;
monobjet.parentNode.height = monobjet.height = hauteur+30+ »px »;
}
else {
monobjet.parentNode.width = monobjet.width = longueur+ »px »;
monobjet.parentNode.height = monobjet.height = hauteur+ »px »;
}
}
}
function initialise() {
resizing();
}
function resizing() {
for(var i=0; i
resize_object(document.embeds[i]);
}
for (var i=0; i
resize_object(jQuery(« .youtube-player »)[i], « youtube »);
}
}
window.onresize = resizing;
jQuery(function($)
{
var /** @type {jQueryObject} */ win,
/** @type {jQueryObject} */ doc,
/** @type {number} */ lastWinWidth,
/** @type {number} */ lastWinHeight,
/** @type {number} */ lastDocWidth,
/** @type {number} */ lastDocHeight,
/** @type {number} */ lastScrollLeft,
/** @type {number} */ lastScrollTop,
/** @type {boolean} */ skip;
// Get window and document wrapper and cache it
win = jQuery(window);
doc = jQuery(document);
// Initialize all sizes and positions to -1
lastWinWidth = lastWinHeight = lastDocWidth = lastDocHeight = lastScrollLeft =
lastScrollTop = -1;
skip = false;
/**
* Interval check of the window and document size and the window
* scroll position.
*/
function check()
{
checkWinSize();
checkDocSize();
checkScrollPos();
}
/**
* Checks the window size. If it has changed then it triggers a
* window resize event.
*/
function checkWinSize()
{
var width, height;
width = /** @type {number} */ (win.width());
height = /** @type {number} */ (win.height());
if (width != lastWinWidth || height != lastWinHeight)
{
lastWinWidth = width;
lastWinHeight = height;
skip = true;
win.trigger(« resize »);
skip = false;
}
}
/**
* Checks the document size. If it has changed then it triggers a
* document resize event.
*/
function checkDocSize()
{
var width, height;
width = /** @type {number} */ (doc.width());
height = /** @type {number} */ (doc.height());
if (width != lastDocWidth || height != lastDocHeight)
{
lastDocWidth = width;
lastDocHeight = height;
skip = true;
doc.trigger(« resize »);
skip = false;
}
}
/**
* Checks if the window scroll position has changed. If it has
* changed then it triggers a window scroll event.
*/
function checkScrollPos()
{
var left, top;
left = /** @type {number} */ (win.scrollLeft());
top = /** @type {number} */ (win.scrollTop());
if (left != lastScrollLeft || top != lastScrollTop)
{
lastScrollLeft = left;
lastScrollTop = top;
skip = true;
win.trigger(« scroll »);
skip = false;
}
}
/**
* Called when browser itself sends a document resize event. Updates
* the last seen size to prevent that the check interval reports the
* change again.
*/
function updateDocSize()
{
if (skip) return;
lastDocWidth = /** @type {number} */ (doc.width());
lastDocHeight = /** @type {number} */ (doc.height());
}
/**
* Called when browser itself sends a window resize event. Updates
* the last seen size to prevent that the check interval reports the
* change again. This method also calls the checkDocSize function
* because in a window with scrollbars it is possible that resizing
* the window also resizes the document.
*/
function updateWinSize()
{
if (skip) return;
lastWinWidth = /** @type {number} */ (win.width());
lastWinHeight = /** @type {number} */ (win.height());
checkDocSize();
}
/**
* Called when the browser itself sends a window scroll event.
* Updates the last seen position to prevent that the check interval
* reports the change again.
*/
function updateScrollPos()
{
if (skip) return;
lastScrollLeft = /** @type {number} */ (win.scrollLeft());
lastScrollTop = /** @type {number} */ (win.scrollTop());
}
// Install resize and scroll handlers
doc.resize(updateDocSize);
win.resize(updateWinSize);
win.scroll(updateScrollPos);
// Install the interval check
setInterval(check, 1000);
});
Pour plus de détails, merci de vous référer à la vidéo et remplacer les « » par des guillemets standard sinon, ça ne fonctionnera pas !