Video block with vimeo not working

Kirby 3 Solved ✅
1

Hello,

I have a slider that shows images from a gallery block and videos from video block (url from vimeo). I can see the poster image from the vimeo video but the video just doesn’t play nor is the play button from the vimeo player working. I got it to work 1 time but then I tried with other videos and it doesn’t work and I didn’t do anything differently. can someone please help me? here’s my blueprint & template code from the video block:

name: field.blocks.video.name
icon: video
preview: video
fields:
  url:
    label: field.blocks.video.url.label
    type: url
    placeholder: field.blocks.video.url.placeholder
  caption:
    label: field.blocks.video.caption
    type: writer
    inline: true

<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php if ($video = video($block->url())): ?>
  <div class="swiper-slide" >
          <div class="slide-container">
<figure class="video">
  <?= $video ?> 
  <?php if ($block->caption()->isNotEmpty()): ?>
  <figcaption><?= $block->caption() ?></figcaption>
  <?php endif ?>
</figure>
</div></div>
<?php endif ?>
2

Can you see any errors in your browser console or your network tab?

3

I got this error: “Allow attribute will take precedence over ‘allowfullscreen’.”
This the code I see on the inspect element:

<div class="swiper-slide swiper-slide-active" role="group" aria-label="4 / 5" style="margin-right: 30px;">
          <div class="slide-container">
<figure class="video">
  <iframe allow="fullscreen" allowfullscreen="" src="https://player.vimeo.com/video/690508923"></iframe> 
  </figure>
</div></div>

This “allowfullscreen” is something that kirby adds automatically right? I didn’t add it anywhere. thank you for your help!!

4

@texnixe sorry to tag you but I keep trying to fix this and the videos won’t work. do you have any idea why this could be happening? I just finished the website and the only thing missing are the videos, I really appreciate your help! thank you for your time!

5

So the only thing you have changed is to move the block into a slider? Is the issue browser specific? Can you see any errors in console?

Does it work outside of the slider?

6

Yes it’s in the slider, I didn’t test it outside the slider because I only need it there. the only console error is this: “Allow attribute will take precedence over ‘allowfullscreen’.” this code is on the vimeo video.

And the first time I tried a video in the slider it worked briefly and then didn’t work anymore and all the other videos are not working

7

The starterkit has a vimeo video without slider in one of the notes (Explore the Universe). Please check if that runs in your environment.

And again: Which browser are you testing in?

8

yes, just checked the starter kit on my computer (localhost) and the video works. do you think it’s because of the slider? but I don’t see any error on the console

9

That’s at least what I assumed and why I asked you to check it out.

Try setting the options parameter on the video() helper: video() | Kirby CMS with the required allow/allowfullscreen attributes.

10

Sorry if this is a stupid question but this is only my second website with kirby and the first time using videos in kirby and I just realize I didn’t have any helper file. I just checked the link you send me and I’m a bit confused: do I need to add for each video the link in the helpers file with the options parameter? the videos will be uploaded on the panel so I don’t have the links of all of them

11

That is a misunderstanding.

In your block snippet, you are using the video() helper with the url as first parameter.

You can add an array of options as second parameter and disabled the default attributes.

12

I tried this to make it work with autoplay but still nothing happens. I’m not sure I understand what you are suggesting, how can I disable the default atributes?

<?php if ($video = video($block->url(),

[
  'vimeo' => [
    'autoplay' => 1,
  ],
]

)): ?>
13

it works on Safari but not on Chrome the autoplay

14

Sorry I just figured iit out I add a div that was not allowing me to click on the button and now the videos are working, the only thing I don’t understand is why does the autoplay doesn’t work on chrome?

15

Sorry, it needs a third $attrs array.

This would disable the allowfullscreen attribute:

    <?= video($block->url(), [], [
      'allowfullscreen' => false,
    ]) ?>

This would remove the allow attribute:

    <?= video($block->url(), [], [
      'allowfullscreen' => true,
      'allow' => false,
    ]) ?>
16

thank you so much Sonja, I have it like this now:

<?php if ($video = video($block->url(), [ 'vimeo' => [ 'autoplay' => 1, 'controls' => 1, 'mute' => 0 ]], [ 'allowfullscreen' => true, 'allow' => false, ])): ?>

but somehow the autoplay doesn’t work, do you see any reason why?

17

Most browsers prevent autoplay these days when the video is not muted. I’m not a fan of autoplaying videos, muted or not. It’s also a waste of resources.

18

you’re right and I will follow your advice was just wondered why is it not working even when I add the mute

19

Should be muted and then set to 1 to have it muted.