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


/cccyoutubefield/language/de-DE/de-DE.plg_fields_cccyoutubefield.sys.ini:
--------------------------------------------------------------------------------
1 | PLG_FIELDS_CCCYOUTUBEFIELD ="CCC Youtube Feld"
2 | PLG_FIELDS_CCCYOUTUBEFIELD_XML_DESCRIPTION = ""


--------------------------------------------------------------------------------
/cccyoutubefield/language/en-GB/en-GB.plg_fields_cccyoutubefield.sys.ini:
--------------------------------------------------------------------------------
1 | PLG_FIELDS_CCCYOUTUBEFIELD ="CCC Youtube Feld"
2 | PLG_FIELDS_CCCYOUTUBEFIELD_XML_DESCRIPTION = ""


--------------------------------------------------------------------------------
/cccyoutubefield/language/en-GB/en-GB.plg_fields_cccyoutubefield.ini:
--------------------------------------------------------------------------------
1 | PLG_FIELDS_CCCYOUTUBEFIELD_LABEL="CCC Youtube Field (%s)"
2 | PLG_FIELDS_CCCYOUTUBEFIELD ="CCC Youtube Field"
3 | PLG_FIELDS_CCCYOUTUBEFIELD_XML_DESCRIPTION = "Joomla! CustomField - Adds a youtube video with responsive container. The video is loaded when the user clicks on the preview."


--------------------------------------------------------------------------------
/cccyoutubefield/language/de-DE/de-DE.plg_fields_cccyoutubefield.ini:
--------------------------------------------------------------------------------
1 | PLG_FIELDS_CCCYOUTUBEFIELD_LABEL="CCC Youtube Feld (%s)"
2 | PLG_FIELDS_CCCYOUTUBEFIELD ="CCC Youtube Feld"
3 | PLG_FIELDS_CCCYOUTUBEFIELD_XML_DESCRIPTION = "Joomla! CustomField - Fügt ein Youtube Video mit responsivem Container hinzu.<br> Das Video wird erst geladen wenn man auf das Vorschaubild klickt."


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # cccyoutubefield
2 | CustomField plugin for Joomla! - Responsive Youtube embed with „load on click" 
3 | 
4 | ## Installation
5 | Install this plugin through the Joomla! Extensions Manager
6 | 
7 | ## Usage
8 | Type in the Video-ID of your Youtube Video into the textbox. The video is rendered in the frontend with the preview-image in a responsive container. If you click on the container the video is loaded. 
9 | 


--------------------------------------------------------------------------------
/cccyoutubefield/cccyoutubefield.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 | JLoader::import('components.com_fields.libraries.fieldsplugin', JPATH_ADMINISTRATOR);
13 | 
14 | 
15 | class PlgFieldsCccyoutubefield extends FieldsPlugin
16 | {
17 | }
18 | 


--------------------------------------------------------------------------------
/cccyoutubefield/tmpl/cccyoutubefield.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 = $field->value;
13 | 
14 | if (!$value)
15 | {
16 | 	return;
17 | }
18 | 
19 | // Loading the javascript and css
20 | JHtml::_('stylesheet', 'plg_fields_cccyoutubefield/cccyoutubefield.css', array('version' => 'auto', 'relative' => true));
21 | JHtml::_('script', 'plg_fields_cccyoutubefield/cccyoutubefield.js', array('version' => 'auto', 'relative' => true));
22 | 
23 | if (is_array($value))
24 | {
25 | 	$value = implode(', ', $value);
26 | }
27 | 
28 | ?>
29 | 
30 | <div class="cccyoutubefield" data-embed="<?php echo htmlentities($value); ?>">
31 | 	<div class="play-button"></div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/manifest.xml:
--------------------------------------------------------------------------------
 1 | <updates>
 2 | 	<update>
 3 | 		<name>CCC Youtube Field</name>
 4 | 		<description>Joomla! CustomField - Adds a youtube video with responsive container. The video is loaded when the user clicks on the preview.</description>
 5 | 		<element>cccyoutubefield</element>
 6 | 		<type>plugin</type>
 7 | 		<folder>fields</folder>
 8 | 		<client>site</client>
 9 | 		<version>1.0-beta</version>
10 | 		<downloads>
11 | 			<downloadurl type="full" format="zip">https://github.com/coolcat-creations/cccyoutubefield/archive/v1.0-beta.zip</downloadurl>
12 | 		</downloads>
13 | 		<tags>
14 | 			<tag>beta</tag>
15 | 		</tags>
16 | 		<infourl title="CCC Youtube Field on GitHub">
17 | 			https://github.com/coolcat-creations/cccyoutubefield/blob/master/README.md
18 | 		</infourl>
19 | 		<maintainer>Elisa Foltyn</maintainer>
20 | 		<maintainerurl>https://www.coolcat-creations.com</maintainerurl>
21 | 		<targetplatform name="joomla" version="3.*"/>
22 | 	</update>
23 | </updates>


--------------------------------------------------------------------------------
/cccyoutubefield/media/js/cccyoutubefield.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 | 	document.addEventListener('DOMContentLoaded', function() {
 4 | 
 5 | 		( function() {
 6 | 
 7 | 			var youtube = document.querySelectorAll( ".cccyoutubefield" );
 8 | 
 9 | 			for (var i = 0; i < youtube.length; i++) {
10 | 
11 | 				var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
12 | 
13 | 				var image = new Image();
14 | 				image.src = source;
15 | 				image.addEventListener( "load", function() {
16 | 					youtube[ i ].appendChild( image );
17 | 				}( i ) );
18 | 
19 | 				youtube[i].addEventListener( "click", function() {
20 | 
21 | 					var iframe = document.createElement( "iframe" );
22 | 
23 | 					iframe.setAttribute( "frameborder", "0" );
24 | 					iframe.setAttribute( "allowfullscreen", "" );
25 | 					iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
26 | 
27 | 					this.innerHTML = "";
28 | 					this.appendChild( iframe );
29 | 				} );
30 | 			};
31 | 
32 | 		} )();
33 | 	});
34 | 
35 | })();


--------------------------------------------------------------------------------
/cccyoutubefield/cccyoutubefield.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8" ?>
 2 | <extension type="plugin" version="3.7.0" group="fields" method="upgrade">
 3 | 	<name>plg_fields_cccyoutubefield</name>
 4 | 	<author>Elisa Foltyn</author>
 5 | 	<creationDate>2017</creationDate>
 6 | 	<copyright>Copyright (C) 2017 - coolcat-creations.com, Elisa Foltyn</copyright>
 7 | 	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
 8 | 	<authorEmail>contact@coolcat-creations.com</authorEmail>
 9 | 	<authorUrl>www.coolcat-creations.com</authorUrl>
10 | 	<version>1.0</version>
11 | 	<description>PLG_FIELDS_CCCYOUTUBEFIELD_XML_DESCRIPTION</description>
12 | 	<updateservers>
13 | 		<server type="extension" priority="1" name="CCC Youtube Field Update Site">https://raw.githubusercontent.com/coolcat-creations/cccyoutubefield/master/manifest.xml</server>
14 | 	</updateservers>
15 | 	<files>
16 | 		<filename plugin="cccyoutubefield">cccyoutubefield.php</filename>
17 | 		<folder>tmpl</folder>
18 | 	</files>
19 | 	<media destination="plg_fields_cccyoutubefield" folder="media" >
20 | 		<folder>css</folder>
21 | 		<folder>js</folder>
22 | 	</media>
23 | 	<languages folder="language">
24 | 		<language tag="en-GB">en-GB/en-GB.plg_fields_cccyoutubefield.ini</language>
25 | 		<language tag="en-GB">en-GB/en-GB.plg_fields_cccyoutubefield.sys.ini</language>
26 | 		<language tag="de-DE">de-DE/de-DE.plg_fields_cccyoutubefield.ini</language>
27 | 		<language tag="de-DE">de-DE/de-DE.plg_fields_cccyoutubefield.sys.ini</language>
28 | 	</languages>
29 | </extension>
30 | 


--------------------------------------------------------------------------------
/cccyoutubefield/media/css/cccyoutubefield.css:
--------------------------------------------------------------------------------
 1 | .cccyoutubefield-container {
 2 | 	position: relative;
 3 | 	padding-bottom: 56.25%;
 4 | 	padding-top: 30px; height: 0; overflow: hidden;
 5 | }
 6 | 
 7 | .cccyoutubefield {
 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 | .cccyoutubefield img {
19 | 	width: 100%;
20 | 	top: -16.84%;
21 | 	left: 0;
22 | 	opacity: 0.7;
23 | }
24 | 
25 | .cccyoutubefield iframe,
26 | .cccyoutubefield object,
27 | .cccyoutubefield embed,
28 | .cccyoutubefield img {
29 | 	position: absolute;
30 | 	top: 0;
31 | 	left: 0;
32 | 	width: 100%;
33 | 	height: 100%;
34 | }
35 | 
36 | .cccyoutubefield .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 | .cccyoutubefield .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 | .cccyoutubefield img,
52 | .cccyoutubefield .play-button {
53 | 	cursor: pointer;
54 | }
55 | .cccyoutubefield img,
56 | .cccyoutubefield iframe,
57 | .cccyoutubefield .play-button,
58 | .cccyoutubefield .play-button:before {
59 | 	position: absolute;
60 | }
61 | .cccyoutubefield .play-button,
62 | .cccyoutubefield .play-button:before {
63 | 	top: 50%;
64 | 	left: 50%;
65 | 	transform: translate3d( -50%, -50%, 0 );
66 | }
67 | .cccyoutubefield iframe {
68 | 	height: 100%;
69 | 	width: 100%;
70 | 	top: 0;
71 | 	left: 0;
72 | }


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