← All changes | modules/theme-tools/responsive-videos/responsive-videos.js +63 -50 12.0.3 → 16.3-beta View file →

		@@ -1,60 +1,73 @@
1		-( function ( $ ) {
2		- var resizeTimer;
	1	+import './responsive-videos.css';
3	2
4		- function responsiveVideos() {
5		- $( '.jetpack-video-wrapper' )
6		- .find( 'embed, iframe, object' )
7		- .each( function () {
8		- var _this, videoWidth, videoHeight, videoRatio, videoWrapper, videoMargin, containerWidth;
	3	+let resizeTimer;
9	4
10		- _this = $( this );
11		- videoMargin = 0;
	5	+/**
	6	+ * Resize all videos in the document.
	7	+ */
	8	+function responsiveVideos() {
	9	+ document.querySelectorAll( '.jetpack-video-wrapper' ).forEach( function ( wrapper ) {
	10	+ wrapper.querySelectorAll( 'embed, iframe, object' ).forEach( function ( video ) {
	11	+ let videoMargin = 0;
12	12
13		- if (
14		- _this.parents( '.jetpack-video-wrapper' ).prev( 'p' ).css( 'text-align' ) === 'center'
15		- ) {
16		- videoMargin = '0 auto';
17		- }
	13	+ const previousSibling = wrapper.previousElementSibling;
	14	+ if (
	15	+ previousSibling &&
	16	+ previousSibling.nodeName === 'P' &&
	17	+ getComputedStyle( previousSibling )[ 'text-align' ] === 'center'
	18	+ ) {
	19	+ videoMargin = '0 auto';
	20	+ }
18	21
19		- if ( ! _this.attr( 'data-ratio' ) ) {
20		- _this
21		- .attr( 'data-ratio', this.height / this.width )
22		- .attr( 'data-width', this.width )
23		- .attr( 'data-height', this.height )
24		- .css( {
25		- display: 'block',
26		- margin: videoMargin,
27		- } );
28		- }
	22	+ if ( ! video.hasAttribute( 'data-ratio' ) ) {
	23	+ video.setAttribute( 'data-ratio', ( video.height || 0 ) / ( video.width || 0 ) );
	24	+ video.setAttribute( 'data-width', video.width );
	25	+ video.setAttribute( 'data-height', video.height );
	26	+ video.style.display = 'block';
	27	+ video.style.margin = videoMargin;
	28	+ }
29	29
30		- videoWidth = _this.attr( 'data-width' );
31		- videoHeight = _this.attr( 'data-height' );
32		- videoRatio = _this.attr( 'data-ratio' );
33		- videoWrapper = _this.parent();
34		- containerWidth = videoWrapper.width();
	30	+ const videoHeight = video.getAttribute( 'data-height' );
	31	+ const videoRatio = video.getAttribute( 'data-ratio' );
	32	+ const containerWidth = video.parentElement.clientWidth;
35	33
36		- if ( videoRatio === 'Infinity' ) {
37		- videoWidth = '100%';
38		- }
	34	+ video.removeAttribute( 'height' );
	35	+ video.removeAttribute( 'width' );
39	36
40		- _this.removeAttr( 'height' ).removeAttr( 'width' );
	37	+ if ( videoRatio === 'Infinity' ) {
	38	+ video.style.width = '100%';
	39	+ video.style.height = videoHeight + 'px';
	40	+ return;
	41	+ }
41	42
42		- if ( videoWidth > containerWidth ) {
43		- _this.width( containerWidth ).height( containerWidth * videoRatio );
44		- } else {
45		- _this.width( videoWidth ).height( videoHeight );
46		- }
47		- } );
48		- }
	43	+ const videoWidth = video.getAttribute( 'data-width' );
49	44
50		- $( document ).ready( function () {
51		- $( window )
52		- .on( 'load.jetpack', responsiveVideos )
53		- .on( 'resize.jetpack', function () {
54		- clearTimeout( resizeTimer );
55		- resizeTimer = setTimeout( responsiveVideos, 500 );
56		- } )
57		- .on( 'post-load.jetpack', responsiveVideos )
58		- .resize();
	45	+ if ( parseInt( videoWidth, 10 ) > containerWidth ) {
	46	+ video.style.width = containerWidth + 'px';
	47	+ video.style.height = containerWidth * parseFloat( videoRatio ) + 'px';
	48	+ } else {
	49	+ video.style.width = videoWidth + 'px';
	50	+ video.style.height = videoHeight + 'px';
	51	+ }
	52	+ } );
59	53	} );
60		-} )( jQuery );
	54	+}
	55	+
	56	+/**
	57	+ * Initialize event listeners and resize everything straight away.
	58	+ */
	59	+function init() {
	60	+ window.addEventListener( 'load', responsiveVideos );
	61	+ window.addEventListener( 'resize', function () {
	62	+ clearTimeout( resizeTimer );
	63	+ resizeTimer = setTimeout( responsiveVideos, 500 );
	64	+ } );
	65	+ window.addEventListener( 'is.post-load', responsiveVideos );
	66	+ setTimeout( responsiveVideos );
	67	+}
	68	+
	69	+if ( document.readyState !== 'loading' ) {
	70	+ init();
	71	+} else {
	72	+ document.addEventListener( 'DOMContentLoaded', init );
	73	+}