← All changes | modules/theme-tools/responsive-videos/responsive-videos.js +73 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,73 @@
	1	+import './responsive-videos.css';
	2	+
	3	+let resizeTimer;
	4	+
	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	+
	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	+ }
	21	+
	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	+
	30	+ const videoHeight = video.getAttribute( 'data-height' );
	31	+ const videoRatio = video.getAttribute( 'data-ratio' );
	32	+ const containerWidth = video.parentElement.clientWidth;
	33	+
	34	+ video.removeAttribute( 'height' );
	35	+ video.removeAttribute( 'width' );
	36	+
	37	+ if ( videoRatio === 'Infinity' ) {
	38	+ video.style.width = '100%';
	39	+ video.style.height = videoHeight + 'px';
	40	+ return;
	41	+ }
	42	+
	43	+ const videoWidth = video.getAttribute( 'data-width' );
	44	+
	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	+ } );
	53	+ } );
	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	+}