JSFiddle - React, Tailwind, and code Playground
HTML
<div id="youtube_player"></div>
CSS
/*____________________Text____________________*/
html,OL,UL,TD,TR,p{
font-family: arial, sans-serif;
font-size: 14px;
/*font-size: 100%;*/
color: black;
margin: 0px 5px 0px 7px;
}
H1, H1 a:link, H1 a:hover, H1 a:visited {
font-family: arial, sans-serif;
color:#006dad;
font-size:21px;
margin:5px 5px 0px 7px;
}
H2, H2 a:link, H2 a:hover, H2 a:visited {
font-family: arial, sans-serif;
font-size: 19px;
font-weight: bold;
color: #5acff7;
/* line-height: 80%;*/
margin: 0px 0px 0px 7px;
}
H3, H3 a:link, H3 a:hover, H3 a:visited {
font-family: arial, sans-serif;
font-size: 17px;
font-weight: bold;
color: black;
/* line-height: 80%; */
margin: 0px 0px 0px 7px;
}
a img {border: none; } /* Fixes yet another IE glitch */
a:link {color: black; } /* unvisited link */
a:visited {color: #006dad; } /* visited link */
a:hover {color: #5acff7; } /* mouse over link */
/* a:active {color: #000000} */ /* selected link */
/* ******** TYPO3 ****************************************** */
/* ~~~ SEARCH FORM ~~~ */
.csc-searchform{
border: 0px;float: left;
clear: left;
margin: 0.5cm 0cm 0cm 0cm;
padding: 0;
}
/* FORM MODULE */
/*THE ULTIMATE REFERENCE: http://www.sitepoint.com/article/fancy-form-design-css*/
/* GET RID OF THAT DAMN BORDER AROUND THE ENTIRE FORM */
.csc-mailform {
border: 0px;float: left;
clear: left;
width: 100%;
margin: 0 0 1.5em 0;
margin-bottom: 0.5em;
padding: 0;
align:center;
}
.csc-mailform-field {
clear: both;
display: block;
margin-bottom: 0.3em;
width: 100%;
}
.csc-mailform legend {
display: none;
}
/*
USE THIS IF YOU WANT TO OVERRIDE WIDTHS OF INPUT FIELDS
.csc-mailform-field input, .csc-mailform-field select,
.csc-mailform-field textarea {
width: 200px;
}
*/
.csc-mailform-field label {
float: left;
width: 300px;
}
.csc-mailform-radio fieldset{
margin-left: 160px;
width: 200px;
}
.csc-mailform-radio input, .csc-mailform-radio...
JavaScript
(function() {
function createPlayer(jqe, video, options) {
var ifr = $('iframe', jqe);
if (ifr.length === 0) {
ifr = $('<iframe scrolling="no">');
ifr.addClass('player');
}
var src = 'http://www.youtube.com/embed/' + video.id;
if (options.playopts) {
src += '?';
for (var k in options.playopts) {
src+= k + '=' + options.playopts[k] + '&';
}
src += '_a=b';
}
ifr.attr('src', src);
jqe.append(ifr);
}
function createCarousel(jqe, videos, options) {
var car = $('div.carousel', jqe);
if (car.length === 0) {
car = $('<div>');
car.addClass('carousel');
jqe.append(car);
}
$.each(videos, function(i,video) {
options.thumbnail(car, video, options);
});
}
function createThumbnail(jqe, video, options) {
var imgurl = video.thumbnails[0].url;
var img = $('img[src="' + imgurl + '"]');
if (img.length !== 0) return;
img = $('<img>');
img.addClass('thumbnail');
jqe.append(img);
img.attr('src', imgurl);
img.attr('title', video.title);
img.click(function() {
options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
});
}
var defoptions = {
autoplay: false,
user: null,
carousel: createCarousel,
player: createPlayer,
thumbnail: createThumbnail,
loaded: function() {},
playopts: {
autoplay: 0,
egm: 1,
autohide: 1,
fs: 1,
showinfo: 0
}
};
$.fn.extend({
youTubeChannel: function(options) {
var md = $(this);
md.addClass('youtube');
md.addClass('youtube-channel');
var allopts =...