[Résolu] Content Layout does not honor width/height of embedded media in shortcode

[Auteur]

Publications

[webD-3]

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.

[Minesh Supporter Languages: Anglais (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');
 
        if($a['url']){
            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?

[webD-3]

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.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

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

[webD-3]

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.

[Minesh Supporter Languages: Anglais (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.

[webD-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?

[Minesh Supporter Languages: Anglais (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.

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01: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.

[webD-3]

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!