[Resolved] control view size of embedded media in Divi module

[Author]

Posts

[eliseD-2]

A while ago I posted a question about controlling the view size of embedded media (videos in particular) in a Divi module and was told that is not possible - but was offered a possible fix. This was the thread:

https://toolset.com/forums/topic//cant-control-view-size-of-embedded-media-field

It was suggested that I use this code in the CSS on the Divi page:
.fluid-width-video-wrapper iframe {
width: 200px;
height: auto;
}

I'm not sure, however, where to put it or how to make it work. I didn't try it at the time because I came up with a work-around, but that work-around isn't working for what I need at the moment.

Thanks!

Elise

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - are you using a content template or could you please share problem URL where you are using the module where you added the video?

[eliseD-2]

I am using a Content Template that is edited with Divi - and which is being called by a View that is inserted into a Divi page.

Here is the page URL:
hidden link

This is a Divi page that has a View inserted into it like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in Glossary Search View"]
	</wpv-loop>
	<!-- wpv-loop-end --> 
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

The "Loop item in Glossary Search View" is a content template that is being edited using Divi.

Elise

[Minesh]

ahh - as you are using the content template - do you see with loop editor you will see CSS box, could you please try to add the CSS to CSS box and save view and try to resolve your issue.

[eliseD-2]

It doesn't seem to make any difference when I put the code into the loop editor - no matter what width I set the video for - it doesn't change the way it outputs at all.

[Minesh]

could you please share access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I've added following CSS to content template of "Loop item in Glossary Sample View":

.fluid-width-video-wrapper iframe {
width: 300px !important;
height: auto;
}

I can see the video size is reduced now. Could you please confirm. However this is not Toolset issue, this needs custom CSS to fix. Please feel free to change above CSS as per your need.

[eliseD-2]

thanks - but it looks like the video is just being cut off on the sides ... it isn't actually smaller ... I'll see if I can attach a screen shot...

[Minesh]

Could you please check now. I've adjusted the CSS as given under:

.fluid-width-video-wrapper iframe {
width: 40% !important;
height: 40% !important;
}

=> hidden link

[eliseD-2]

Thanks. It's still not perfect (as now the module is much bigger than the video - and in the smaller ones (where the grid has them four across) the video is way too small.

but I get the idea - so I'll keep messing with it.

Thanks for your help!