You Tube and Vimeo Toggle switch for embedding a player

Kirby 2 Questions 🤔
1

Hi Guys I am new to Kirby so forgive me.

To Create a Toggle switch (Yes or No) between Vimeo or You Tube Embed Link

Currently the code was set up to accept only Vimeo links

Question #1 How do you set up the YML blueprint to accomplish this?

How do we construct the if statement? Or what code will need implemented to make this work

Below is the current code the last developer set up

<?php if($videoURL): ?>

  <?php $episode = $videos->findBy('video_id', $videoURL); ?>

    <?php if($episode): ?>

      <div class="embed">
        <iframe src="https://player.vimeo.com/video/<?= $episode->video_id();?>?api=1&color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" class="episode" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>
      </div>

      <h1 class="is-size-2 is-size-4-mobile mt10"><?= $episode->name() ?></h1>

      <?php else: ?>

        <div class="has-text-centered m20">
          <span class="icon is-large">
            <i class="fa fa-warning"></i>
           </span>

          <h1 class="is-size-3 is-size-4-mobile mt10">
             Sorry, we couldn't find your video!
          </h1>
          <p>Please visit the <a href="<?= url() ?>/teachings">teachings page</a> to find all current teachings!</p>
        </div>

      <?php endif ?>

      <?php else: ?>

To see how the player is currently working on a live page scroll down to bottom of this website
http://www.drenda.com

2

How are the two variables $videoURL and $videos defined?

3

Do you need to see the YML file? Sorry I am not a senior programmer. Is below what you need?

<?php if($item->videoURL()->isNotEmpty()): ?> 
  <div class="embed">
    <iframe src="//www.youtube.com/embed/<?php echo $item->videoURL()?>?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=0" width="968" height="545" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  </div>
<?php endif ?>
4

<?php $videos = $pages->find('videos')->dkm_videos()->toStructure() ?>

5

Ok, so you are looping through a structure field here. Yes, the blueprint would indeed be helpful. And I guess you need the toggle within the structure field, right?

1 Like
6

Heres the videos.yml file

title: Videos
icon: film
pages:
  limit: 8
  template:
    - video

fields:
  dkm_videos:
    label: Videos
    type: structure
    style: table
    fields:
      name:
        label: Video Title
        type: text
      episode:
        label: Episode
        type: text
        width: 1/2
      video_id:
        label: Vimeo ID
        type: text
        width: 1/2
      video_series:
        label: Link to Series
        type: select
        options: query
        query:
          page: archives
          fetch: children
          value: '{{uid}}'
          text: '{{title}}'
7

Correct we need to toggle whether to use the Vimeo Url or You Tube. Our directive is to be able to choose between the two options.

8

I’d use a radio button, not a toggle

fields:
  dkm_videos:
    label: Videos
    type: structure
    style: table
    fields:
      name:
        label: Video Title
        type: text
      video_type:
        label: Category
        type: radio
        options:
          vimeo: Vimeo
          youtube: Youtube
      episode:
        label: Episode
        type: text
        width: 1/2
      video_id:
        label: Vimeo ID
        type: text
        width: 1/2
      video_series:
        label: Link to Series
        type: select
        options: query
        query:
          page: archives
          fetch: children
          value: '{{uid}}'
          text: '{{title}}'

Then you can check the value of the field:

if($item->video_type() === 'vimeo'):
  // do something
endif;
if($item->video_type() === 'youtube'):
  // do something else
endif;

You could use a toggle as well, then you have to decide what you want your text to read:

  toggle:
    label: Is this a Youtube video?
    type: toggle
    text: yes/no

But I think a radio field is better suited in this case.

1 Like
9

What do I add in the do something area?

10

The embed code you need, i.e the iframe.

1 Like
11

Ah Got ya. You are amazing thanks so much I will implement this code into staging and see what happens.

12

So I applied the code to staging but I am not seeing the You tube video. I looked at the message in Chrome Developer tools looks like its still applying the vimeo url

if you scroll down you will see the player.
https://staging.drenda.com/

13

here is the updated file. The new radio button is displaying just fine in the videos admin dashboard.

<?php if($videoURL): ?> 
					<?php $episode = $videos->findBy('video_id', $videoURL); ?>

					<?php if($episode): ?>
		  
		  <?php if($item->video_type() === 'vimeo'): ?>
          		
		  <div class="embed">
							<iframe src="https://player.vimeo.com/video/<?= $episode->video_id();?>?api=1&color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" class="episode" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>
						</div>

						<h1 class="is-size-2 is-size-4-mobile mt10"><?= $episode->name() ?></h1>
		  
		  
		<?php endif; ?>
		<?php if($item->video_type() === 'youtube'): ?>
		  
  			<div class="embed">
							<iframe src="https://www.youtube.com/watch?v=<?= $episode->video_id();?>?api=1&color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" class="episode" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>
						</div>

						<h1 class="is-size-2 is-size-4-mobile mt10"><?= $episode->name() ?></h1>
		  
		  <?php endif; ?>
14

Are the correct values saved in the file?

15

Which file the videos.yml file? yes.

Theres also a file in Snippets folder called video.php

Heres what that looks like

<?php if($item->videoURL()->isNotEmpty()): ?>
  <div class="embed">
    <iframe src="//player.vimeo.com/video/<?php echo $item->videoURL()?>?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=0" width="968" height="545" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  </div>
<?php endif ?>
16

Hm, where does this snippet come in? Is it used anywhere?

But what I meant was, if for each video in the structure field, the radio field contains the correct values?

I can’t debug this for you. I suggest you add some echo commands within your if your if statements to check if they work as expected.

Something along the lines of

 <?php if($item->video_type() === 'vimeo'): ?>
   <?= "Hey, I'm a vimeo video" ?>
<?php endif ?>

And the same for the youtube video.

17

Might have just been a copy and paste mistake into the forum, but looks like your missing an endif.

you left this outside the code block…

<?php if($videoURL): ?>

it’s got a matching endif, in your code, right?

18

Yes it does. I will add the echo commands in to see of the code is responding as expected.

19

Cool. If that doesn’t help you track the issue down, might be worth maybe popping the entire site code up on github/bitbucket so we can see the whole picture. Bitbucket allows free private repos that you can give access to specific users if you would rather not share it publicly.

1 Like
20

If the endif was missing, the page would break, anyway. It’s definitely something else.