concrete5 YouTube block customization tips


This is how-to for concrete5 web masters and developers. YouTube now recommend to use “iFrame” instead of “object” tag. And I also came up with a custom template for playlist which you can easily embed the YouTube playlist onto your concrete5 site.

You need the basic knowledge of installing and working with concrete5, and how to use FTP .

YouTube block iFrame customization

Here is easy how-to of iFrame. This method will replace the entire existing YouTube blocks. If you don’t want to change the existing YouTube blocks, you may want to apply this as custom template.

1. Create a blank text file at

/blocks/youtube/view.php

2. Copy and paste the following code

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$url = parse_url($videoURL);
parse_str($url['query'], $query);
$c = Page::getCurrentPage();

$vWidth=640; // Video Width
$vHeight=390; // Video Height

if ($c->isEditMode()) { ?>
<div style="width:<?php  echo $vWidth; ?>px; height:<?php  echo $vHeight; ?>px;">
<div style="padding:8px 0px; padding-top: <?php  echo round($vHeight/2)-10; ?>px;"><?php  echo t('Content disabled in edit mode.'); ?></div>
</div>

<?php  } else { ?>
<iframe width="<?php echo $vWidth;?>" height="<?php echo $vHeight;?>" src="http://www.youtube.com/embed/<?php echo $query['v'];?>" frameborder="0" allowfullscreen></iframe>
<?php  } ?>

3. Height and width

Change the number of $vWidth and $vHeight according to your site dimension, or you can create new custom template to change the dimension.

4. Save the text file

5. Upload it to your concrete5 server

Use this block as original YouTube block.

YouTube block custom template for Playlist

YouTube has “Playlist” function. You can add multiple videos and play them all together.

When you made a playlist or obtain somebody else’ public playlist URL, you can now easily add the YouTube playlist onto your concrete5 site.

1. Create a blank text file at

/blocks/youtube/templates/playlist.php

2. Copy and paste the following code

<?php
defined('C5_EXECUTE') or die("Access Denied.");
$url = parse_url($videoURL);
parse_str($url['query'], $query);
$c = Page::getCurrentPage();

$vWidth=640; // Video Width
$vHeight=390; // Video Height
$playlistID= str_replace('PL','',$query['list']);

if ($c->isEditMode()) { ?>
<div style="width:<?php  echo $vWidth; ?>px; height:<?php  echo $vHeight; ?>px;">
<div style="padding:8px 0px; padding-top: <?php  echo round($vHeight/2)-10; ?>px;"><?php  echo t('Content disabled in edit mode.'); ?></div>
</div>

<?php  } else { ?>
<object width="<?php echo $vWidth;?>" height="<?php echo $vHeight;?>"><param name="movie" value="http://www.youtube.com/p/<?php echo $playlistID;?>?version=3&hl=<?php echo LOCALE;?>&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/p/<?php echo $playlistID;?>?version=3&hl=<?php echo LOCALE;?>&fs=1" type="application/x-shockwave-flash" width="<?php echo $vWidth;?>" height="<?php echo $vHeight;?>" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<?php  } ?>

3. Height and width

Change the number of $vWidth and $vHeight according to your site dimension, or you can create new custom template to change the dimension.

4. Save the text file

5. Upload it to your concrete5 server

How to use it

  • Get the URL of playlist
    • EXAMPLE: http://www.youtube.com/playlist?list=PL297A125DC0A5A054
  • Create a new YouTube block
  • Type title and paste the Playlist URL onto the block
  • Save
  • Click the block
  • Click “Custom Template”
  • Choose “Playlist”
  • Save
  • Publish

Done

Enjoy the easy to embed playlist in concrete5 site.