Support ForumGigantic embedded youtube video – Support Forum

Gigantic embedded youtube video

WilhelmR — Mon, 25 Nov 2013 23:14:05 +0000

Hello there,

One of my posts has a youtube vid embedded in it, and with Creolio the video won’t stay inside the content column.

more here: https://www.wil.es/google-web-designer/

Any help appreciated

Reply To: Gigantic embedded youtube video

IshYoBoy — Tue, 26 Nov 2013 08:27:21 +0000

Hi,

You’re right! To fix this, please open the file:

wp-content\themes\creolio\assets\core\libs\js\main.js

And on line 558 add the following function:

/*
 * Iframes height fix
 */
if ( jQuery('iframe').length > 0 ) {
	jQuery(window).resize(function() {
		var src = jQuery('iframe');
		src.each(function() {
			var self = jQuery(this);
			var parent = self.parent();
			var ow = parent.width();

			var attsrc = self.attr('src');

			if ( (attsrc) && (attsrc.indexOf('soundcloud.com') == -1) ){

				var w = self.attr('width');
				var h = self.attr('height');
				var rat = ow / w;

				self.css('width', '100%');

				if ( ow > 0 ){
					self.attr('width', ow);
					self.attr('height', parseInt(h * rat));
				}
			}
		});
	});
}

* Iframes height fix

if ( jQuery('iframe').length > 0 ) {

jQuery(window).resize(function() {

var src = jQuery('iframe');

src.each(function() {

var self = jQuery(this);

var parent = self.parent();

var ow = parent.width();

var attsrc = self.attr('src');

if ( (attsrc) && (attsrc.indexOf('soundcloud.com') == -1) ){

var w = self.attr('width');

var h = self.attr('height');

var rat = ow / w;

self.css('width', '100%');

if ( ow > 0 ){

self.attr('width', ow);

self.attr('height', parseInt(h * rat));

}

});

}

It should be after the block of code which handles embeds. One more think to add to make it a little nicer is a little “custom css” and so:

iframe {
	max-width: 100%;
}

iframe {

max-width: 100%;

}

You can add it into the “Custom CSS Styles” field under “Creolio Options”.
Please let us know if this helped.

Cheers.

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Gigantic embedded youtube video

IshYoBoy — Tue, 26 Nov 2013 08:31:59 +0000

P.S.:

There is no need to put the whole embed code for the video or to put inside a col or . You can simply ebed it using the following shortcode inside the content of you post:

[embed]https://www.youtube.com/watch?v=kHj7fqbNaQw[/embed]

just make sure the link is not clickable if you are using the Visual Editor.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Gigantic embedded youtube video

WilhelmR — Tue, 26 Nov 2013 22:03:37 +0000

Hello again, than you for the quick reply.

The css code does fix the issue of the video being too wide, but I had to put an extra rule to limit the height too.

.embed-youtube iframe {
	max-width: 100%;
	max-height: 400px;
}

.embed-youtube iframe {

max-width: 100%;

max-height: 400px;

}

Thanks again!

Reply To: Gigantic embedded youtube video

IshYoBoy — Wed, 27 Nov 2013 06:50:11 +0000

Hey,

Thanks for sharing. Yep, the height can also be controlled ;) But in this case the height will never get bigger than 400px.. In pages without sidebar where the video would be 1170px wide the height 400px might be insufficient. But this is on case by case, so we’re glad you got yours solved!

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market