[Resolved] Embedded YouTube videos are not responsive

[Author]

Posts

[jesseH-3]

I am using an embedded media field to insert YouTube videos into my site.
The shortcode I am using is: [types field='webinar-youtube-video' width='800px'][/types]
The resulting output it not responsive; the videos get cropped at some screen sizes.
I was unable to find anything in your documentation addressing this, and the forum discussions on this topic were all 2+ years old. So I thought I would ask what is the current best practice using Types & Views to make the embedded media field output responsive.

[Minesh]

Hello. Thank you for contacting the Toolset support.

First of all, after checking debug information you shared with us, I found that you are using outdated Types plugin.

*** Please make a FULL BACKUP of your database and website.***
Could you please update ALL Toolset plugins to it's latest official released version. You can download it form:
=> https://toolset.com/account/downloads/

After update if your issue still persists, you should try to use Bootstrap to display responsive video:
=> hidden link

More info:
=> hidden link

[jesseH-3]

Ok. I have tried

<div class="embed-responsive">[types field='webinar-youtube-video'][/types]</div>

and

<div class="embed-responsive embed-responsive-16by9">[types field='webinar-youtube-video'][/types]</div>

but neither are working because the iframe is outputting a size (even though I am not specifying one):

<iframe src="<em><u>hidden link</u></em>" style="border: none" allowfullscreen="" width="1200" height="675"></iframe>

1200x675 is larger than the container that my video is in, so my video is being cropped (not shown in its entirety).

Can you please clarify how I can successfully use the Bootstrap responsive embed with a types field?

[Minesh]

is it possible for you to share problem URL?

*** 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 see video loaded as responsive video - what issue you are having?

[jesseH-3]

I already stated the issue I'm having. The iframe is larger than its container. Please look back at my second post!
I do see now that all of the videos are responsive once they are played. It is only the static preview image that is cropped. Please let me know how to fix this.

[Minesh]

What if you try the following approach:
=> hidden link

If this help you to resolve your issue all fine. If not - I will to contact our Devs and confirm if its expected behavior or not.

[jesseH-3]

The solution at hidden link requires the ability to add a class to the iframe. Correct me if I'm wrong, but I don't think that's possible with the wp-types video embed shortcode.

[jesseH-3]

Since I can't pass a class in the iframe, I've created the container (video-container) and am targeting iframes inside it with this CSS:

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

This seems to be working. The 100% width and height are overriding the iframe's width and height that the shortcode is creating.

But, this isn't a very elegant solution. It would be nice if the shortcode didn't output a height and width for the iframe if one is not specified. Or add the ability to pass a class and/or a width and height as a percentage.