Problem using iframe within Views Loop

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

This thread is resolved. Here is a description of the problem and solution.

Problem: When I place an iframe in my post content, it automatically expands to be full-width. I would like to specify the dimensions for the iframe myself.

Solution: Use CSS to override Layouts' responsive video feature:

iframe {
  width: 200px !important;
  height: 100px !important;
}

This support ticket is created 7 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by Andrew Kuczynski 7 years, 6 months ago.

Assisted by: Christian Cox.

Author

Posts

May 23, 2017 at 4:08 pm #527580

Andrew Kuczynski

Screen Shot 2017-05-23 at 11.51.35 AM.png

Screen Shot 2017-05-23 at 11.51.17 AM.png

Screen Shot 2017-05-23 at 11.47.41 AM.png

I am trying to: Use an iframe component in my Views Loop

I expected to see: a formatted iframe in each loop with dimensions X by Y

Instead, I got: While the height of the iframe is correct, the iframe width seems to be automatically filling the entire page.

Please see the attached images of my view loop, the content template mentioned in that loop, and an example of what Im talking about. (Note: in the end, a field called video-url will be placed in the content template, but for testing purposes a google drive link has been placed there)

What I'm trying to do in the end is something like the tutorial posted here:
hidden link
Essentially, I want this iframe to act like a thumbnail of the video found at that URL.

Please let me know if there is possible fix, or if I was unclear about anything.

Thanks!

- Andrew

May 23, 2017 at 9:48 pm #527705

Christian Cox

Looks like you've got things set up well...I wonder if there is some other CSS overriding your style, like in your theme? I can take a look if this is online somewhere.

May 23, 2017 at 11:51 pm #527725

Andrew Kuczynski

It is online and I am using the Toolset Starter Theme since it is a pretty fresh website in it's early stages.

I'd be happy to give you a look, the link is below-
[ very early stages, the video with my dogs is just a test post ???? ]

hidden link

Thanks,

Andrew

May 24, 2017 at 12:38 pm #527938

Christian Cox

Okay I see, Layouts resizes iframes in an effort to make videos responsive, expanding to fill the screen width at different resolutions. If you want to override this you can use your own custom CSS with !important:

iframe {
  width: 200px !important;
  height: 100px !important;
}

If you're looking for a way to override the JS itself, you can find this code in
/wp-content/plugins/layouts/resources/js/ddl-layouts-frontend.js. In a child theme you could theoretically override DDLayout.EmbeddedManager methods, though I have not tested this.

May 24, 2017 at 2:39 pm #528002

Andrew Kuczynski

Worked great.

Thanks man!

- Andrew

The forum ‘Types Community Support’ is closed to new topics and replies.