Here's how to make embeds into PowerCMS from YouTube and Vimeo Responsive
Hello, I thought I would just post this to share. I have tried a few different things that didn't seem to work, and stumbled upon this that does work with PowerCMS!
This is a technique that works for making the iframe embed codes from YouTube and Vimeo responsive if clients paste them into the "Source" in PowerCMS:
It comes from:
https://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
The only limitation I see is that it isn't specific to the smaller screens (it makes videos on a computer monitor 100% width vs. the width specified in the original embed code). If someone knows how to adapt it, that would be great to know!
It is as easy as adding in the following code before the closing body tag in your pages:
<script>(function ( window, document, undefined ) {
/*
* Grab all iframes on the page or return
*/
var iframes = document.getElementsByTagName( 'iframe' );
/*
* Loop through the iframes array
*/
for ( var i = 0; i < iframes.length; i++ ) {
var iframe = iframes[i],
/*
* RegExp, extend this if you need more players
*/
players = /www.youtube.com|player.vimeo.com/;
/*
* If the RegExp pattern exists within the current iframe
*/
if ( iframe.src.search( players ) > 0 ) {
/*
* Calculate the video ratio based on the iframe's w/h dimensions
*/
var videoRatio = ( iframe.height / iframe.width ) * 100;
/*
* Replace the iframe's dimensions and position
* the iframe absolute, this is the trick to emulate
* the video ratio
*/
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
/*
* Wrap the iframe in a new <div> which uses a
* dynamically fetched padding-top property based
* on the video's w/h dimensions
*/
var wrap = document.createElement( 'div' );
wrap.className = 'fluid-vids';
wrap.style.width = '100%';
wrap.style.position = 'relative';
wrap.style.paddingTop = videoRatio + '%';
/*
* Add the iframe inside our newly created <div>
*/
var iframeParent = iframe.parentNode;
iframeParent.insertBefore( wrap, iframe );
wrap.appendChild( iframe );
}
}
})( window, document ); </script>
In my case, I created a php include and just called up the include at the bottom of each page. I hope this is helpful to some in the WebAssist Community