Skip Navigation

[Resolved] Content Layout does not honor width/height of embedded media in shortcode

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 9 replies, has 3 voices.

Last updated by webD-3 5 years, 2 months ago.

Assigned support staff: Nigel.


I am trying to: Place the following shortcode in a Content Template to display a Custom Field of Embedded Media type containing a Youtube URL

[types field='homepage-video' width='480' height='270']

I expected to see: An embed of 480x270

Instead, I got: An embed of 100% wide (1170px, width of .container) with the following resulting HTML:

<iframe width="100%" height="657.3033707865169" frameborder="0" allowfullscreen="" src="<em><u>hidden link</u></em>">

I am able to constrain the embed by specifying the height and with in CSS but don't understand why the above shortcode does not work.



Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

What if you try to add following code to your functions.php file:

add_shortcode('my-youtube', 'wpv_shortcode_youtube');
function wpv_shortcode_youtube($atts, $content = null) {
        $id = '';
        $a = shortcode_atts( array(
                'width' => '480',
                'height' => '270',
        'url' => ''
    ), $atts, 'my-youtube');
            parse_str( parse_url( $a['url'], PHP_URL_QUERY ), $url_vars );
            $id = $url_vars['v'];
        return "<iframe width='" . $a['width'] ."' height='" . $a['height'] . "' src='<em><u>hidden link</u></em>{$id}?rel=0&showinfo=0' frameborder='0' allowfullscreen></iframe>";

And than in you can output embed video with this code:

[my-youtube url="[types field='homepage-video'][/types]"]

Does this help?


I had to add output=raw to the Types the shortcode slightly to get the video to display...

[my-youtube url="[types field='homepage-video' output='raw'][/types]"]

However, the end result is the same; the resulting iframe code has a width of 100% and a height equal to 56.25% of the container width.

I have tried disabling all plugins, including disabling and reenabling Toolset plugins, but the problem persists.



Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

What if you try to check with the default theme (2016)?


I have changed to the default Twentysixteen theme, and both the regular shortcode

[types field='homepage-video' width='480' height='270'][/types]

and the custom shortcode you provided above

[my-youtube url="[types field='homepage-video' output='raw'][/types]"]

work perfectly when inserted into the content template.

When I switch back to the Toolset Starter Child Theme again, the video once again fills the entire container.



Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

What if you try to wrap the iframe code within the div and check if that works:

For example:

  return "<div class='yourclass'> <iframe width='" . $a['width'] ."' height='" . $a['height'] . "' src='<em><u>hidden link</u></em>{$id}?rel=0&showinfo=0' frameborder='0' allowfullscreen></iframe></div>";

I see in our internal system that this issue is already reported and this will be fixed in next release of types version 2.3.


Wrapping a div around the iframe doesn't seem to make any difference. However, if a fix is on its way that is OK; this is a new, under-construction site that is not yet ready for launch. What is the estimated timeframe for version 2.3?



Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Yes - this issue will be fixed with next release of types version 2.3.

Unfortunately, I do not have any ETA on this but I'll update you as soon as we release next version.



Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Last night we rolled out minor-version updates of several plugins of the Toolset suite, which should have fixed this problem.

Be sure to have a current backup available and then apply all of the Toolset updates, and then re-test.

If you still see the problem then please reply here so it can be investigated further.


I have updated all the Types plugins and now it does seem as though the Youtube embed is preserving the width and height I have placed into the shortcode. Thank you!