Responsive Video via Javascript

Developing B3 wordpress theme i found out test videos exceed post content block but CSS solution for images like

img {max-width: 100%; height: auto;}


does not work for videos. So, I tried to get videos responsive using javascript:

function b3theme_video_size(elem) {
	var w, h, ow, pw, nw, nh;
	var e = jQuery(elem);
	if (e.prop('tagName') == 'EMBED' && e.parent().prop("tagName") == 'OBJECT') {
		pw = e.parent().parent().width();
	}
	else {
		pw = e.parent().width();
	}
	ow = e.outerWidth(true);
	if (ow <= pw) {
		return;
	}
	w = e.width();
	h = e.height();
	nw = pw - ow + w;
	nh = h * nw / w;
	e.width(nw+'px');
	e.height(nh+'px');
}

	jQuery('.entry-content iframe, .widget iframe, .entry-content object, .widget object, .entry-content embed, .widget embed, .entry-content video, .widget video')
		.each(function(index, elem){
		b3theme_video_size(elem);
	});

Leave a Reply

Your email address will not be published. *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>