Youtube change from K2

In v2 the youtube tag worked and added some default attributes which I could override.

$attr = array_merge(array(
  'src'                   => '//' . $domain . '/embed/' . $id . $options,
  'frameborder'           => '0',
  'webkitAllowFullScreen' => 'true',
  'mozAllowFullScreen'    => 'true',
  'allowFullScreen'       => 'true',
  'width'                 => '100%',
  'height'                => '100%',
), $attr);

These are no longer added and adding attibutes to the youtube tag are not longer reflecting on the output

This: (youtube: http://www.youtube.com/watch?v=htAZcpj5uqE width:100%)

outputs to

K2 <iframe src="//youtube.com/embed/htAZcpj5uqE" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" width="100%" height="358"></iframe>

K3 <iframe allowfullscreen="" src="https://youtube.com/embed/htAZcpj5uqE"></iframe>

Thoughts?

If you don’t specify width, height or class, the tags tries to get if from the options:

         return Html::figure([$video], $tag->caption, [
                'class'  => $tag->class  ?? $tag->kirby()->option('kirbytext.video.class', 'video'),
                'height' => $tag->height ?? $tag->kirby()->option('kirbytext.video.height'),
                'width'  => $tag->width  ?? $tag->kirby()->option('kirbytext.video.width'),

So you can set your default options in your config, maybe also the mozallowfullscreen stuff, haven’t tested…

Ok, that makes sense, but …

   'kirbytext' => [
        'video' => [
            'class' => 'video',
            'height' => '358px',
            'width' => '100%'
        ]
    ]

image

It applied to the figure, not the iframe, I guess I can apply the CSS, but means the tag height and width are broken.

Yes, you are right, it’s applied to the figure. Although, if you apply 100% to the iframe in your CSS, it should work?

true, but the iFrame is inserted by kirby. possible issue?

I will CSS it in this case

Looks like you can set Youtube and Vimeo options as well… Unfortunately, it’s a bit difficult to extract all the possible options…

In fact, the HTML height attribute is not working, only works if applied as a css style. still making the height attr invalid

See this screenshot.

In K2 setting the width automatically set the height, videos seem a little broken with the current implementation?

This is the last hurdle from hitting the switch on the K2 -> k3 conversion

I’m still not there, but for parameters that should be added to the URL, you can set them like this:

  
    'kirbytext' => [
        'video' => [
            'options' => [
                'youtube' => [
                    'autoplay' => true,
                    'controls' => 0,
                    'modestbranding' => 1,
                    'showinfo' => 0
                
            
                    ]
            ]
        ]
        
    ] 

Which then results in an iframe with a src url like this:

<iframe allowfullscreen="" src="https://youtube.com/embed/c1Fr1gJurdw?allowfullscreen=0&amp;autoplay=1&amp;controls=0&amp;modestbranding=1&amp;showinfo=0"></iframe>

Yes, but the iframe itself it not sized? I will try this out though in more detail.

I have removed the high level content videos, but there are some lower level content videos which look awful which were fine in K2

If all else fails, you could just implement the old youtube tag again…

I could you’re right, but seems the main kirby implementation is not working as expected, I may be wrong though. I am going to publish my site and then play in the starterkit.

Well, I’m not sure if there’s something wrong, if this is intended behavior, or if it is just not properly documented. Unfortunately, the options are nowhere really documented and you have to get them from all over the code, which makes things a bit difficult. Feels free to open an issue on GitHub, so that we can sort this out.

1 Like

For sure, thanks for the help. Before I open a ticket I will check on a starterkit at least then I can attach to the ticket to assist.