Embed Youtube Video? Please help

Kirby 3 Questions 🤔
1

Hello everyone
First things first, I’m trying out Kirby for the very first time and I also have almost no experience with php :stuck_out_tongue: Your help is therefor very appreciated.

I can’t seem to get the youtube() helper to work.
My goal is to embed a video from youtube and I tried a lot of different things. But all im getting as output is ether an Error-Message or the URL in plain text.

This is what I currently have:

<?= youtube($konzertDetails->video_url()) ?>

And in the blueprint:

content:
    type: fields
    fields:
      video_url:
        label: Video
        type: url

Cheers!

2

Hm, the code looks alright, provided that $konzertDetails is defined (so a bit more context would be helpful). What is actually saved in your page’s content file?

With this example URL in my text file

Video_url: https://youtu.be/QwjX8JAwBws

I can render the video in a template like this:

<?= youtube($page->video_url()); ?>
3

Hi there and thank you for your time.

In my text file I have a normal YouTube URL, pretty much like the one in your example.

To give a little bit more context: I’m trying to build a one-page-website containing 9 different projects/pages. Each project contains several sub-pages with content and everything is being displayed on the front page.
Right now everything works as expected besides the youtube() implementation :smiley:

I mean if I use a hardcoded URL it works.
youtube('https://youtu.be/QwjX8JAwBws')
But as soon as I want to get the URL from the text file, I get an error
<?= youtube($konzertDetails->video_url())?>

Here is the whole snippet for Project1 which contains subfolders
(Note that I use foreach to get all the sub-pages YouTube URL, maybe I doing it wrong)

<section id="konzert1" class="konzert">
  <?= $data->titel() ?>

  <div class="konzertNav">
    <?php foreach($data->children()->listed() as $konzertDetails): ?>
      <span>
        <?= $konzertDetails->titel() ?>
      </span>
    <?php endforeach ?>
  </div>

  <div class="konzertDetails">
    <?php foreach($data->children()->listed() as $konzertDetails): ?>
      <div class="konzertDetailsContainer">
        <img src="<?= $konzertDetails->images()?>">
        <?= youtube($konzertDetails->video_url())?>
        <p><?= $data->datum() ?></p>
        <p><?= $data->name() ?></p>
        <p><?= $konzertDetails->mitwirkende() ?></p>
        <p><?= $konzertDetails->werkzeuge() ?></p>
        <p><?= $konzertDetails->beschreibung() ?></p>
      </div>
    <?php endforeach ?>
  </div>
</section>

My entire blueprint:

title: Details

sections:
  gallery:
    type: files
    layout: list

  content:
    type: fields
    fields:
      video_url:
        label: Video
        type: url
      Titel:
        label: Titel
        type: text
      Mitwirkende:
        label: Mitwirkende
        type: text
      Werkzeuge:
        label: Werkzeuge
        type: text
      Beschreibung:
        label: Beschreibung
        type: textarea
        size: small

And my text file:

Titel: h

----

Mitwirkende: Hainrisc T, Richard Harpur, Silvan Schmid

----

Werkzeuge: 32 min / Synthesizer, Drums, E-Guitar, Vocals

----

Beschreibung: Wir vertonen das Sterben einer Antilope und nähern uns musikalisch einer Vorstellung eines Lebens nach dem Tod an.

----

Video_url: https://www.youtube.com/watch?v=UBuH1b0Dqm0
4

24
Bildschirmfoto 2019-09-07 um 11.05.24.jpg1522×1072 246 KB

I just tried to reproduce your error, but it seems to work flawlessly.

I’m not sure about your line <img src="<?= $konzertDetails->images()?>">. If you remove it, does the video show?

5

I still get an Error when I remove this line
<img src="<?= $konzertDetails->images()?>">

:sob:

I’m sure I’missing something on my part.

6

Could you please provide more information about the error? What sort of error? Where? Maybe also post the screenshot with the error.

7

This line doesn’t make sense, btw. The source attribute requires the Url of a single image.

8

Hey guys

So I tried rebuilding everything from scratch, but still couldn’t get the youtube() helper to work.
Also I changed this line <img src="<?= $konzertDetails->images()?>"> to something else (see down below).

Everytime I use <?= youtube($konzertDetails->video_url())?> or something else like video() the webpage displays this error message:

26
Bildschirmfoto 2019-09-07 um 13.11.26.png1740×872 22.6 KB

Is it because I’m using the plainkit instead of the starterkit?

Anyway, my workaround currently is, to create the url from different pieces and put them together in an iframe:

<section id="konzert1" class="konzert">
  <?= $data->konzertnummer() ?>

  <div class="konzertNav">
    <?php foreach($data->children()->listed() as $konzertDetails): ?>
      <span>
        <?= $konzertDetails->titel() ?>
      </span>
    <?php endforeach ?>
  </div>

  <div class="konzertDetails">
    <?php foreach($data->children()->listed() as $konzertDetails): ?>
      <div class="konzertDetailsContainer">

        <!-- Get image-->
        <?php if ($file = $konzertDetails->files()->first()): ?>
          <div class="img-container">
            <img src="<?= $file->url() ?>" alt="">
          </div>
        <?php endif ?>

        <!-- Create Video URL -->
        <?php if ($url = $konzertDetails->video_url()): ?>
          <div class="video-container">
            <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/<?= $url ?>?origin=<?= $page->url() ?>&modestbranding=1;showinfo=0;rel=0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        <?php endif ?>

        <!-- Get text content-->
        <p><?= $data->konzertdatum() ?></p>
        <p><?= $data->konzertname() ?></p>
        <p><?= $konzertDetails->mitwirkende() ?></p>
        <p><?= $konzertDetails->werkzeuge() ?></p>
        <p><?= $konzertDetails->beschreibung() ?></p>
      </div>
    <?php endforeach ?>
  </div>
</section>

I know this problem persists due to my inexperience. Sorry for wasting your time :see_no_evil:

9

No worries.

As a first step, please enable debug in your config.php.

Since you are using the Plainkit instead of the Starterkit, you first have to create the config folder inside the /site folder, then inside that new folder, a config.php with the following content:

<?php

return [
    'debug' => true
];

Once you’ve done that, please post your error.

10

Okay, it says:

Exception thrown with message "Unexpected video type"

Stacktrace:
#13 Exception in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Toolkit/Html.php:447
#12 Kirby\Toolkit\Html:video in /Applications/MAMP/htdocs/plainkit-master/kirby/config/helpers.php:854
#11 youtube in /Applications/MAMP/htdocs/plainkit-master/site/snippets/konzert1.php:23
#10 require in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Toolkit/Tpl.php:38
#9 Kirby\Toolkit\Tpl:load in /Applications/MAMP/htdocs/plainkit-master/kirby/config/components.php:162
#8 Kirby\Cms\App:{closure} in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Cms/App.php:1192
#7 Kirby\Cms\App:snippet in /Applications/MAMP/htdocs/plainkit-master/kirby/config/helpers.php:683
#6 snippet in /Applications/MAMP/htdocs/plainkit-master/site/templates/home.php:6
#5 require in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Toolkit/Tpl.php:38
#4 Kirby\Toolkit\Tpl:load in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Cms/Template.php:168
#3 Kirby\Cms\Template:render in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Cms/Page.php:1130
#2 Kirby\Cms\Page:render in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Cms/App.php:584
#1 Kirby\Cms\App:io in /Applications/MAMP/htdocs/plainkit-master/kirby/src/Cms/App.php:870
#0 Kirby\Cms\App:render in /Applications/MAMP/htdocs/plainkit-master/index.php:5
11

What if you store the video URL like this: https://youtu.be/UBuH1b0Dqm0

12

Same thing unfortunately.

13

This is weird. Actually, both video URLs work for me.

Have you tried to clear the browser cache?