├── cccyoutube
    ├── language
    │   ├── en-GB
    │   │   ├── en-GB.plg_cccyoutube.sys.ini
    │   │   └── en-GB.plg_cccyoutube.ini
    │   └── de-DE
    │   │   ├── de-DE.plg_cccyoutube.sys.ini
    │   │   └── de-DE.plg_cccyoutube.ini
    ├── tmpl
    │   └── cccyoutube.php
    ├── cccyoutube.xml
    ├── media
    │   ├── css
    │   │   └── cccyoutube.css
    │   └── js
    │   │   └── cccyoutube.js
    └── cccyoutube.php
└── README.md


/cccyoutube/language/en-GB/en-GB.plg_cccyoutube.sys.ini:
--------------------------------------------------------------------------------
1 | PLG_CCCYOUTUBE="CCC Youtube"
2 | PLG_CCCYOUTUBE_XML_DESCRIPTION="Adds a youtube video with responsive container. The video is loaded when the user clicks on the preview."


--------------------------------------------------------------------------------
/cccyoutube/language/de-DE/de-DE.plg_cccyoutube.sys.ini:
--------------------------------------------------------------------------------
1 | PLG_CCCYOUTUBE ="CCC Youtube"
2 | PLG_CCCYOUTUBE_XML_DESCRIPTION = "Fügt ein Youtube Video mit responsivem Container hinzu.<br> Das Video wird erst geladen wenn man auf das Vorschaubild klickt."


--------------------------------------------------------------------------------
/cccyoutube/language/en-GB/en-GB.plg_cccyoutube.ini:
--------------------------------------------------------------------------------
1 | PLG_CCCYOUTUBE_LABEL="CCC Youtube"
2 | PLG_CCCYOUTUBE="CCC Youtube"
3 | PLG_CCCYOUTUBE_XML_DESCRIPTION="Adds a youtube video with responsive container. The video is loaded when the user clicks on the preview."


--------------------------------------------------------------------------------
/cccyoutube/language/de-DE/de-DE.plg_cccyoutube.ini:
--------------------------------------------------------------------------------
1 | PLG_CCCYOUTUBE_LABEL="CCC Youtube"
2 | PLG_CCCYOUTUBE="CCC Youtube"
3 | PLG_CCCYOUTUBE_XML_DESCRIPTION="Fügt ein Youtube Video mit responsivem Container hinzu.<br> Das Video wird erst geladen wenn man auf das Vorschaubild klickt."


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # plg_cccyoutube
2 | A plugin to show youtube videos only after user click to help with the loading time and GDPR
3 | 
4 | # usage
5 | embed your video with {cccyoutube}rFxXoHkIwMk{/cccyoutube} where the code between the brackets is the Video ID.
6 | 
7 | https://www.youtube.com/watch?v=rFxXoHkIwMk
8 | 


--------------------------------------------------------------------------------
/cccyoutube/tmpl/cccyoutube.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * @package     Joomla.Plugin
 4 |  * @subpackage  Fields.CCCyoutubefield
 5 |  *
 6 |  * @copyright   Copyright (C) 2017 Coolcat-Creations.com, Elisa Foltyn.
 7 |  * @license     GNU General Public License version 2 or later; see LICENSE.txt
 8 |  */
 9 | 
10 | defined('_JEXEC') or die();
11 | 
12 | $value = $text;
13 | 
14 | if (!$value)
15 | {
16 | 	return;
17 | }
18 | 
19 | // Loading the javascript and css
20 | JHtml::_('stylesheet', 'plg_cccyoutube/cccyoutube.css', array('version' => 'auto', 'relative' => true));
21 | JHtml::_('script', 'plg_cccyoutube/cccyoutube.js', array('version' => 'auto', 'relative' => true));
22 | 
23 | if (is_array($value))
24 | {
25 | 	$value = implode(', ', $value);
26 | }
27 | 
28 | ?>
29 | 
30 | <div class="cccyoutube" data-embed="<?php echo htmlentities($value); ?>">
31 | 	<div class="play-button"></div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/cccyoutube/cccyoutube.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <extension version="3.0" type="plugin" group="content">
 3 | 	<name>Content - CCC Youtube</name>
 4 | 	<author>Elisa Foltyn</author>
 5 | 	<creationDate>23.04.18</creationDate>
 6 | 	<copyright>(C) Elisa Foltyn - COOLCAT creations. All rights reserved.</copyright>
 7 | 	<license>GNU General Public License version 3 or later</license>
 8 | 	<authorEmail>joomla@coolcat-creations.com</authorEmail>
 9 | 	<authorUrl>www.coolcat-creations.com</authorUrl>
10 | 	<version>1.0.0</version>
11 | 	<description>PLG_CCCYOUTUBE_XML_DESCRIPTION</description>
12 | 	<updateservers>
13 | 		<server type="extension" priority="1" name="CCC Youtube Plugin Update Server"></server>
14 | 	</updateservers>
15 | 	<files>
16 | 		<filename plugin="cccyoutube">cccyoutube.php</filename>
17 | 		<folder>tmpl</folder>
18 | 	</files>
19 | 	<media destination="plg_cccyoutube" folder="media" >
20 | 		<folder>css</folder>
21 | 		<folder>js</folder>
22 | 	</media>
23 | 	<config>
24 | 		<fields name="params">
25 | 			<fieldset name="basic">
26 | 			</fieldset>
27 | 		</fields>
28 | 	</config>
29 | </extension>
30 | 


--------------------------------------------------------------------------------
/cccyoutube/media/css/cccyoutube.css:
--------------------------------------------------------------------------------
 1 | .cccyoutube-container {
 2 | 	position: relative;
 3 | 	padding-bottom: 56.25%;
 4 | 	padding-top: 30px; height: 0; overflow: hidden;
 5 | }
 6 | 
 7 | .cccyoutube {
 8 | 	background-color: #000;
 9 | 	margin-bottom: 30px;
10 | 	position: relative;
11 | 	padding-bottom: 56.25%;
12 | 	overflow: hidden;
13 | 	cursor: pointer;
14 | 	padding-top: 30px;
15 | 	height: 0;
16 | 
17 | }
18 | .cccyoutube img {
19 | 	width: 100%;
20 | 	top: -16.84%;
21 | 	left: 0;
22 | 	opacity: 0.7;
23 | }
24 | 
25 | .cccyoutube iframe,
26 | .cccyoutube object,
27 | .cccyoutube embed,
28 | .cccyoutube img {
29 | 	position: absolute;
30 | 	top: 0;
31 | 	left: 0;
32 | 	width: 100%;
33 | 	height: 100%;
34 | }
35 | 
36 | .cccyoutube .play-button {
37 | 	width: 90px;
38 | 	height: 60px;
39 | 	background-color: #333;
40 | 	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
41 | 	z-index: 1;
42 | 	opacity: 0.8;
43 | 	border-radius: 6px;
44 | }
45 | .cccyoutube .play-button:before {
46 | 	content: "";
47 | 	border-style: solid;
48 | 	border-width: 15px 0 15px 26.0px;
49 | 	border-color: transparent transparent transparent #fff;
50 | }
51 | .cccyoutube img,
52 | .cccyoutube .play-button {
53 | 	cursor: pointer;
54 | }
55 | .cccyoutube img,
56 | .cccyoutube iframe,
57 | .cccyoutube .play-button,
58 | .cccyoutube .play-button:before {
59 | 	position: absolute;
60 | }
61 | .cccyoutube .play-button,
62 | .cccyoutube .play-button:before {
63 | 	top: 50%;
64 | 	left: 50%;
65 | 	transform: translate3d( -50%, -50%, 0 );
66 | }
67 | .cccyoutube iframe {
68 | 	height: 100%;
69 | 	width: 100%;
70 | 	top: 0;
71 | 	left: 0;
72 | }


--------------------------------------------------------------------------------
/cccyoutube/media/js/cccyoutube.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 | 	document.addEventListener('DOMContentLoaded', function() {
 4 | 
 5 | 		var cccyoutube = document.querySelectorAll('.cccyoutube');
 6 | 
 7 | 		for (var i = 0; i < cccyoutube.length; i++) {
 8 | 
 9 | 			var field  = cccyoutube[i],
10 | 			    embed  = field.getAttribute('data-embed'),
11 | 			    source = 'https://img.youtube.com/vi/' + embed + '/sddefault.jpg',
12 | 			    width, height;
13 | 
14 | 			// Create new image and set the source
15 | 			var image = new Image();
16 | 			image.src = source;
17 | 
18 | 			image.addEventListener('load', function() {
19 | 				field.appendChild(image);
20 | 
21 | 				// Get the image dimensions
22 | 				width  = image.width;
23 | 				height = image.height;
24 | 			}(i));
25 | 
26 | 			field.addEventListener('click', function(event) {
27 | 
28 | 				// Create the div container
29 | 				var div = document.createElement('div');
30 | 				div.classList.add('cccyoutube');
31 | 
32 | 				// Create the iframe
33 | 				var iframe = document.createElement('iframe');
34 | 
35 | 				// Put the iframe inside the div container
36 | 				div.appendChild(iframe);
37 | 
38 | 				// Setup the initial iframe
39 | 				iframe.setAttribute('src', '//www.youtube.com/embed/' + embed + '?rel=0&showinfo=0&autoplay=1');
40 | 				iframe.setAttribute('frameborder', '0');
41 | 
42 | 				// Set the iframe dimensions to be the same as the image
43 | 				iframe.setAttribute('width', width);
44 | 				iframe.setAttribute('height', height);
45 | 
46 | 				// Replace the image with the iframe
47 | 				this.parentNode.replaceChild(div, this);
48 | 
49 | 			});
50 | 
51 | 		}
52 | 	});
53 | 
54 | })();
55 | 


--------------------------------------------------------------------------------
/cccyoutube/cccyoutube.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * @package     Joomla.Plugin
 4 |  * @subpackage  Fields.CCCyoutubefield
 5 |  *
 6 |  * @copyright   Copyright (C) 2017 Coolcat-Creations.com, Elisa Foltyn.
 7 |  * @license     GNU General Public License version 2 or later; see LICENSE.txt
 8 |  */
 9 | 
10 | use Joomla\CMS\Plugin\CMSPlugin;
11 | use Joomla\CMS\HTML\HTMLHelper;
12 | 
13 | defined('_JEXEC') or die;
14 | 
15 | jimport('joomla.plugin.plugin');
16 | 
17 | class PlgContentCccyoutube extends CMSPlugin
18 | {
19 | 
20 | 
21 | 	public function onContentPrepare($context, &$row, &$params, $page = 0)
22 | 	{
23 | 		// Don't run this plugin when the content is being indexed
24 | 		if ($context == 'com_finder.indexer') {
25 | 			return true;
26 | 		}
27 | 
28 | 		if (is_object($row)) {
29 | 
30 | 
31 | 			$this->youtubeToVideo($row->text);
32 | 
33 | 			HTMLHelper::_('jquery.framework');
34 | 
35 | 			HTMLHelper::_('stylesheet', 'plg_cccyoutube/cccyoutube.css', array('version' => 'auto', 'relative' => true));
36 | 			HTMLHelper::_('script', 'plg_cccyoutube/cccyoutube.js', array('version' => 'auto', 'relative' => true));
37 | 
38 | 
39 | 			return true;
40 | 		}
41 | 
42 | 		$this->youtubeToVideo($row);
43 | 
44 | 		return true;
45 | 	}
46 | 
47 | 	protected function youtubeToVideo(&$text)
48 | 	{
49 | 
50 | 
51 | 		$tagname = "cccyoutube";
52 | 
53 | 		$pattern = "#{\s*?$tagname\b[^}]*}(.*?){/$tagname\b[^}]*}#s";
54 | 
55 | 		$text = preg_replace($pattern, $this->replaceYoutube('$1'), $text);
56 | 
57 | 		return true;
58 | 	}
59 | 
60 | 	protected function replaceYoutube($videoId)
61 | 	{
62 | 
63 | 		$replaceString = '<div class="cccyoutube" data-embed="' . htmlentities($videoId) . '"><div class="play-button"></div></div>';
64 | 
65 | 		return $replaceString;
66 | 	}
67 | 
68 | }
69 | 
70 | 
71 | 
72 | 


--------------------------------------------------------------------------------