YouTube-Videogalerie für das eigene Forum!
Aktualisiert 11.03.24

Update für YouTube-Videos

YouTube-Videos werden durch einen kleinen Data-Eintrag im Foren-Code DSGVO konform!

1
 

<iFrame data-name="youtube" data-src=" ... "></iFrame>
 

Bilder - und Videogalerie minimiert!

Übersicht der Videogalerie!

• Die Alben Übersicht in der Videogalerie ist mit einer Überschrift und einem Vorschau-Video ausgestattet!
• Die Doppelpfeile und die Themenüberschrift führen zum Videoalbum!
• Der Pfad-Button führt zur Alben Übersicht der Bilder- & Videogalerie!

Geöffnetes Videoalbum mit Themenüberschrift!

• Das Videoalbum ist zum besseren navidieren mit einer Pfadleiste und Pfad-Button ausgelegt!
• Die Pfad-Leiste und die Überschrift beinhaltet das Videothema.
• Ein Klick auf die Titelleiste eines Videos vergrößert die Ansicht!
• Zu besseren Übersicht bei einer Vielzahl von Videos im Album, lassen sich die Videofenster auch verkleinern!
• Die YouTube-Videos lassen sich, wie gewohnt ohne Abstriche bedienen!

Vergrößertes Videofenster mit Bedienung-Button!

• Wird das Videofenster vergrößert, lassen sich die Videos im Album in beiden Richtungen auswählen.
• Ein Schließen-Button führt immer zur Übersicht des Videoalbums.
• Auch ein Klick auf die Titelleiste des Videos schließt die vergrößerte Ansicht!

Geöffnetes Videoalbum mit verkleinerten Videofenstern!

• Werden die Videofenster verkleinert, sehr günstig bei vielen Videos, kann der Titel des Videos immer noch gelesen werden!
• Ein Klick auf die Titelleiste des Videos vergrößert das Videofenster!

Das neue Forum-Kino!

• Das Forum-Kino ist von der Forum-Übersicht in die Videogalerie umgezogen
• Das Forum-Kino hat mehrere Unter- und Videoalben!

Die Videogalerie mit ihren Plugin-Elementen

• Die Videogalerie ist mit ihren Plugin-Elementen und z.Z. nicht mit Einstellungen versehen!
• Die Videodaten werden übersichtlich im Skript eingetragen!
• Die Videogalerie ist an die Bildergalerie angehängt!
• Das Template wird nicht verändert und kann nach belieben ausprobiert und getestet werden!

Schließen

Als erstes wird ein Plugin mit dem Name z.B. Videogalerie angelegt.
Hier wird ein Template-Element "Untere Leiste Header" > "bottom_header" erstellt und das folgende Skript eingetragen!






• Zeile 240 sorgt dafür, dass alle gängigen YouTube-Videoadressen verarbeiten werden können!
• Sollen alle Alben der Bildergalerie gleich angezeigt werden, muss in Zeile 159 ":first" und die gesamte Zeile 160 gelöscht werden!
• Sollen alle Alben der Videogalerie gleich angezeigt werden, muss in Zeile 162 ":first" und die gesamte Zeile 163 gelöscht werden!
• In Zeile 4+5 wird der YouTube nochmal formatiert und angepasst!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
 
{{template==144.start}}
<style>
  /* YouTube Video-Hinweis DSGVO */
  div[data-name="youtube"] .context-notice {border-radius: 5px; box-shadow: 0.5rem 0.5rem 6px rgba(0, 0, 0, 0.6); border:5px double #aaaaaa !important; margin:7px 15px; max-width:300px;}
  div[data-type="placeholder"] {display:inline-block;}
 
.videostyle {display: inline-block; vertical-align: top;}
.videostyle .userinfo {padding: 5px 10px;background:{{global_box_header_background|rgb_lightness(91)}};color: {{global_boxheader_fontcolor}} !important;}
.videostyle .userinfo a {color: {{global_boxheader_fontcolor}} !important;}
.videostyle .videoinfo {display:none;padding: 5px 10px 10px 10px;text-align:left;}
.videodiv {width:320px;margin: 0px 30px 18px 0px; position: relative; border: 1px solid {{global_box_header_background|rgb_lightness(80)}}; border-radius:6px; text-align: center;padding:0px;}
.videodivdiv {color: {{global_boxheader_fontcolor}} !important;padding: 10px 30px;cursor:pointer;
background: {{global_box_header_background}} bottom left repeat-x;
background-image: -moz-linear-gradient(15% 90% 90deg,{{global_box_header_background|rgb_lightness(90)}}, {{global_box_header_background}}, {{global_box_header_background}} 100%);	
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{global_box_header_background}}), to({{global_box_header_background|rgb_lightness(90)}}));
background-image:-ms-linear-gradient(90deg,{{global_box_header_background|rgb_lightness(90)}},{{global_box_header_background}});
}
.videodivdiv h5 {white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}
.videodivdiv span {position:absolute;right:0px;font-size:10px;margin:-1px 10px 0 10px;}
.videoiframe {width:300px;height:200px;margin:10px;border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;}
.convert_div {background:#eeeeee;}
 
.video .videosmall {display:none;}
.button.videoexit {visibility:hidden; width:60px; text-align:center; margin-right:10px;}
.button.videovor, .button.videozurueck {visibility:hidden; width:30px; text-align:center; margin-right:10px;}
.button.button_mehr,.button.button_video {font-size:12px; padding:2px 20px !important; margin-left:10px; letter-spacing:5px;}
 
.video .gcat_further {margin-top: 3px; padding: 3px 0px 20px 0px; border-top: 1px solid {{global_boxcontent_background|rgb_lightness(95)}};}
.cat_video {width: 230px; border-right: 1px solid {{global_boxcontent_background|rgb_lightness(95)}};}
.cat_covervideo {width: 260px; vertical-align: middle; text-align: center; overflow: hidden; float: left; height: auto;}
.video_cover {width:200px;height:125px;vertical-align: middle;}
.video ul.forum li {border-bottom: 1px solid {{global_box_header_background|rgb_lightness(80)}};}
.video {border-bottom: none;}
 
.boxcontent.titel {background:{{global_box_header_background|rgb_lightness(75)}};color: {{global_boxheader_fontcolor}};padding: 10px 30px;border-radius:6px;box-shadow:0px 0px 6px #ffffff;border:1px solid {{global_box_header_background}};font-weight:bold;}
 
.cat_coverpic {width:260px !important;}
</style>
 
<script>  
//Veänderung Navileiste Bilder- & Videogalerie
$("#link_gallery span:contains('Bildergalerie')").text("Bilder- & Videogalerie");
$("#breadcrumbs strong:contains('Bildergalerie')").html("<a href='/gallery.php' style='font-weight:normal;'>Bilder- & Videogalerie</a>");
$("#breadcrumbs small:contains('Bildergalerie')").text("Die Bilder- & Videogalerie des Forums.");
$("#breadcrumbs strong:contains('Album-Übersicht')").text("Alben anzeigen");
  
if ($('.page_gallery,.page_pages').length > 0) {
$('.page_gallery #breadcrumbs').before('&nbsp;<center><h3 style="margin:20px 0 30px 0;"><span class="boxcontent titel">Die Bilder- und Videogalerie</span></h3></center>'); 
$(".boxheader strong:contains('Bildergalerie - Alben')").html("Bildergalerie - <font color='#ffc628'>Alben Übersicht</font>");
  
// Video-Navileiste und Video-Button
$('.videonav').html(`<div id="breadcrumbs">
<img alt="Forum" src="//files.homepagemodules.de/b2001010/a_750_0c1d25e4.png"><a href="/forum.php">Forum</a> » <a href="/gallery.php">Alben Übersicht</a> » 
<a href="/gallery.php#alben">Zur den Video Alben</a> » <font color="#222222"><strong></strong></font>
<div>&nbsp;&nbsp;<small>Die Videogalerie. Ein Klick auf die Titelleiste vergrößert oder verkleinert das Video!</small></div></div>
<div class="clear"></div><br><br>
<center><h3><span class="boxcontent titel">`+daten.Ersteller_Titel+`</span></h3></center><br><br><br>
<a class="button" href="/gallery.php" style="margin:0 20px 0 10px;">Zurück zur Alben Übersicht</a>
<a class="button" href="/gallery.php#alben" style="margin-right:20px;">Zur den Video Alben</a>
<a class="button videosmall" style="margin-right:20px;color:{{global_boxheader_fontcolor|rgb_lightness(90)}};">Videofenster verkleinern</a>
<a class="button videozurueck"><<</a>
<a class="button videovor">>></a>
<a class="button videoexit">Schließen</a>`);
  
 
$('.videosmall').click(function(){
$('html,body').animate({scrollTop:$(this).offset().top-150},500); 
$('body').css('min-height','1300px');
$('.videodiv').show().css({'height': 'auto','width':'150px'});
$('.videoiframe').css({'height': '90px', 'width': '125px'});
$('.videovor').css('visibility','hidden');
$('.videoinfo,.breadcrumbs,.videosmall').hide();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">').css ({'margin-right':'0px'});
$('.videodivdiv h5').css({'font-size':'10px','text-align':'left','white-space':'unset'});
$('.videodivdiv').css({'padding':'5px 19px 7px 10px'});
$('.userinfo a,.userinfo strong').css({'font-size':'11px'});
});
 
if ($('.page_pages .video').length > 0) {
$('.videosmall,.button.titel').hide();  
}
  
$('.videozurueck').click(function(){
$('.videodivdiv').each(function(){  
$('.videostyle').each(function(){
if($(this).is(":visible")) { 
$(this).click();
};
});
});
});
 
$('.videovor').click(function(){
$('.videostyle').each(function(){
if($(this).is(":visible")) { 
$(this).click(); 
};
});
});
 
$('.videoexit').click(function(){
$('.videostyle').each(function(){
if($(this).is(":hidden")) {
$(this).click();
};
});
});
 
$(".convert_youtube,videoiframe,.userinfo").click(function(event){
event.stopPropagation();
});
 
$('.videostyle').toggle(function() {
$('.videodiv').hide().css({'height': 'auto','width':'820px'}); 
$('.videosmall').hide();
$('.videodiv',this).show();
$('.videoinfo').show();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b2001010/a_970_7d763b7a.png"> Schließen').css('margin-right','10px');
$('.videodivdiv h5').css({'font-size':'','text-align':'','white-space':''});
$('.videodivdiv').css({'padding':''});
$('.userinfo a,.userinfo strong').css({'font-size':''});
$('.videoiframe',this).css({'height': '500px', 'width': '800px'});
$('.videovor,.videozurueck,.videoexit').css('visibility','visible');
$('html,body').animate({scrollTop:$(this).offset().top-200},500); 
$('.tms2 .spacer10').after(`<div class="breadcrumbs" style="margin-top:30px;">
<img alt="Forum" src="//files.homepagemodules.de/b2001010/a_750_0c1d25e4.png"><a href="/forum.php">Forum</a> &#8594; <a href="/gallery.php"><font color="#ffc628">Album-Übersicht</font></a> &#8594;
<a href="/gallery.php#alben">Zu den Video Alben</a> &#8594; <font color="#ffc628"><strong>Unteralben anzeigen</strong></font>`);    
},function(){
  
$('.videodiv').show().css({'height': 'auto','width':'320px'});
$('.videosmall').show();
$('.videoiframe').css({'height': '200px', 'width': '300px'});
$('.videovor,.videozurueck,.videoexit').css('visibility','hidden');
$('.videoinfo,.breadcrumbs').hide();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">');
});
 
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">');
  
$('.videostyle,.videovor').click(function(){
if($('.videostyle:last').is(":visible")) { 
$('.videovor').hide();
$('.videozurueck').show();
};
})  
 
$('.videostyle,.videozurück').click(function(){
if($('.videostyle:first').is(":visible")) { 
$('.videozurueck').hide();
$('.videovor').show();
}else{
$('.videozurueck').show();
};
});
 
if (location.href.indexOf('gallery.php') > -1) {
$('.gcat.forum li').hide(); // $('.vid').hide(); 
// Bildergalerie minimieren //
$('.gcat.forum li:nth-child(-n+3)').show(); // 3 Alben werden angezeigt. Zahl kann beliebig gewählt werden!
$('.noimage.gcat.forum li:last-child').after('<a title="Bitte anklicken!" class="button button_mehr">Alle Alben anzeigen</a>');
// Videogalerie minimieren//
//$('.vid:nth-child(-n+3)').show();  // 3 Alben werden angezeigt. Zahl kann beliebig gewählt werden!
//$('.vid:last-child').after('<a title="Bitte anklicken!" class="button button_video">Alle Alben anzeigen</a>');
 
$('.button_mehr').click(function(){
$('.page_gallery').find('.box.video').hide();
$('.gcat.forum li').show()
$('.button_mehr').hide()
location.href = '#bild';
$('a.button:first').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').html('Die Bildergalerie');
});
 
if (location.href.indexOf('#bild') > -1) {
$('.page_gallery').find('.box.video').hide();
$('.gcat.forum li').show()
$('.button_mehr').hide()
$('a.button:first').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').text('Die Bildergalerie');
};
}else{
$('.box.video').hide();
if (!$('.page_pages').length > 0) {
$('.boxcontent.titel').text('Die Bildergalerie');
};
};
  
$('.button_video').click(function(){
$('.page_gallery .button').hide();
$('.page_gallery').find('.box').hide();
$('.box.video, .box.video li').show()
$('#breadcrumbs').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
location.href = '#alben';
$('.boxcontent.titel').text('Die Videogalerie');
});
  
if (location.href.indexOf('#alben') > -1) {
$('.page_gallery .button').hide();
$('.page_gallery').find('.box').hide()
$('.box.video, .box.video li').show()
$('#breadcrumbs').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').text('Die Videogalerie');
}
 
//// Videos Dateneingabe ////  
$('.videostyle .userinfo a').text(daten.Ersteller);
$('.videostyle .userinfo a').attr('href',daten.Ersteller_Link);
$('#breadcrumbs strong').text(daten.Ersteller_Titel);
 
 
function anzeige_video() {
$.each(daten.Titel, function(i) { 
$('#video_'+i+' .videodivdiv strong').text(daten.Titel[i]);
//$('#video_'+i+' .videoiframe').attr('src',daten.Video[i]);
$('#video_'+i+' .videoiframe').attr({'src':  daten.Video[i], 'data-src': daten.Video[i]}); 
$('#video_'+i+' .videoinfo').html(daten.VideoInfo[i]);
$('#video_'+i+' .userinfo strong').text(daten.Ersteller_Datum[i]);
});
};
  
//// Themenübersicht Dateneingabe ////
function Anzeige_VThema() {
 
$.each(daten.ThPage, function(i) { 
$('#VThema_'+i+' .ThErsteller small').text(daten.Ersteller[i]);
$('#VThema_'+i+' .ThErsteller').attr('href',daten.Ersteller_Link[i]);
 
$('#VThema_'+i+' .cat_covervideo a, #VThema_'+i+' .spacer10 strong a').attr('href',daten.ThPage[i]);
$('#VThema_'+i+' .cat_covervideo .video_cover').attr('src',daten.ThStartVideo[i]);
$('#VThema_'+i+' .spacer10 strong a').text(daten.ThTitel[i]);
$('#VThema_'+i+' .gcat_further .ThDatum').text(daten.Ersteller_Datum[i]);
$('#VThema_'+i+' .ThInfo').html(daten.ThInfo[i]);
$('#VThema_'+i+' .gcat_further .ThCount').text(daten.Anzahl_Videos[i]);
});
};
  
};
 
//// Videokonverter ////
window.addEventListener('load', function ( ) {$('.convert_youtube').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("/shorts/", "/embed/").replace(/&.+/g, '">');});});
</script>
{{template==144.end}}
 



Schließen




Als nächsten Schritt wird ein zweites Template-Element "Bildergalerie-Home Footer" > "gallery_footer" für die Themenübersicht benötigt!
Template-Element "Bildergalerie-Home Footer" > "gallery_footer" erstellen und das folgende Skript eingetragen!






[li]In Zeile 9+10 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 13-17 werden die Videodaten zum 1. Thema eingetragen.
• Die Videogalerie ist für 3 Themen mit je 3 Videos voreingestellt!
• Werden weitere Themen benötigt, müssen Zeile 8-19 kopiert und wiederholt eingetragen werden!
• In Zeile 12 führt die Verlinkung zu den Videos des Themas.
• Wichtig! Die Verlinkung in Zeile 12, 25, 38, ... muss mit der erstellten Videoadresse für "Eigene Seite" übereinstimmen (Installation Punkt 8)!
• Die Zahl vom Video-Link "/video1.html" muss bei jedem weiteren Thema um 1 erhöht werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
{{template==144.start}}
<script>
$('.page_gallery .box:last').after('<div class="box video"><div class="boxheader"><strong>Videogalerie - <font color="#ffc628">Alben Übersicht</font></strong></div></div>');
 
var daten = {Ersteller: [],Ersteller_Link: [],ThPage: [],ThStartVideo: [],ThTitel: [],Ersteller_Datum: [],ThInfo: [],Anzahl_Videos: []}
var them = 0;
  
// Video-Thema 1
daten.Ersteller[them] = 'Name des Album-Erstellers'; 
daten.Ersteller_Link[them] = 'https://www.Link_zum_Profil';
 
daten.ThPage[them] = '/video1.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 1';
daten.Ersteller_Datum[them] = '31.05.23';
daten.ThInfo[them] = 'Beschreibung Thema 1: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
  
// Video-Thema 2
daten.Ersteller[them] = 'Name des Album-Erstellers'; 
daten.Ersteller_Link[them] = 'https://www.Link_zum_Profil';
 
daten.ThPage[them] = '/video2.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 2';
daten.Ersteller_Datum[them] = '31.05.23';
daten.ThInfo[them] = 'Beschreibung Thema 2: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
  
// Video-Thema 3
daten.Ersteller[them] = 'Name des Album-Erstellers'; 
daten.Ersteller_Link[them] = 'https://www.Link_zum_Profil';
 
daten.ThPage[them] = '/video3.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 3';
daten.Ersteller_Datum[them] = '31.05.23';
daten.ThInfo[them] = 'Beschreibung Thema 3: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
 
//// Ende der Dateneingabe ////
  
$('.vid').html('<ul class="gcat forum"><li><table><tr><td class="cat_video"><div data-name="youtube" data-modified-by-klaro="yes" class="cat_covervideo convert_youtube"><iframe data-modified-by-klaro="yes" class="video_cover videoiframe" allowfullscreen></iframe><a title="Zu den Videos"><img src="//files.homepagemodules.de/b2001010/a_234.png"><img style="margin:0 -12px 0 -12px;" src="//files.homepagemodules.de/b2001010/a_234.png"></a></div></td><td><div class="spacer10"><strong><a  title="Zu den Videos"></a></strong><div class="gcat_further"><small> &nbsp;&nbsp;&nbsp; Hochgeladene Videos: <span class="ThCount"></span> &nbsp;&nbsp;&nbsp; Album erstellt von: <a class="ThErsteller" title="Zum Profil"><small></small></a>&nbsp;&nbsp;&nbsp; Letzter Upload: <span class="ThDatum"></span></small></div><small><span class="ThInfo"></span></small></div></td></tr></table><div class="clear"></div></li></ul>'); $(function(){Anzeige_VThema(); });
</script>
{{template==144.end}}
 



Schließen




Für jedes Video-Thema wird im Plugin eine "Eigene Seite" angelegt mit den Namen "video1.html", "video2.html", "video3.html" .....u.s.w.
Eigene Seite "video1" erstellen und alle 4 Kästchen anhaken!
Ebenso für "video2", "video3", ..... !
Jeweils das folgende Skript eintragen!
Für jedes weitere Video eine neue "Eigene Seite" erstellen, "video4", "video5", ....!






• In Zeile 9+10 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 11 wird nochmal der Titel des Thema eingetragen.
• In Zeile 14-17, 22-25, 30-33,... werden die Videodaten der einzelnen Videos zum Thema eingetragen.
• Die Videogalerie ist mit 3 Videos je Thema voreingestellt!
• Werden weitere Videos benötigt, müssen Zeile 13-19 kopiert und wiederholt eingetragen werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
{{template==144.start}}
<div class="videonav"></div><div class="spacer10" style="margin-left:55px;"><ul class="video_galerie"></ul><div class="clear"></div></div>
 
<script>
var daten = {Titel: [],Video: [],VideoInfo: [],Ersteller_Datum: []}
var vid = 0;
  
// Erstellerdaten
daten.Ersteller = 'Name des Video-Erstellers';
daten.Ersteller_Link = 'https://www.Link_zum_Profil';
daten.Ersteller_Titel = 'Thema der Videogalerie';
 
// Videodaten 1
daten.Titel[vid] = 'In Arbeit - Titel Video 1';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung 1: In Arbeit .........';
daten.Ersteller_Datum[vid] = '31.05.23';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
 
// Videodaten 2
daten.Titel[vid] = 'In Arbeit - Titel Video 2';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung 2: In Arbeit .........';
daten.Ersteller_Datum[vid] = '31.05.23';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
 
// Videodaten 3
daten.Titel[vid] = 'In Arbeit - Titel Video 3';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung 3: In Arbeit .........';
daten.Ersteller_Datum[vid] = '31.05.23';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
 
//// Ende Dateneingabe ////
 
 
$('.videostyle').html('<div class="videodiv"><div class="videodivdiv" title="Video mit einem Klick, vergrößern oder verkleinern!"><h5><strong></strong><span></span></h5></div><div data-name="youtube" data-modified-by-klaro="yes" class="convert_youtube convert_div"><iframe data-modified-by-klaro="yes" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameborder="0" class="videoiframe"></iframe></div><div class="userinfo"><div class="videoinfo"></div><small><strong></strong> - <a title="Hier geht es mit einem Klick zum Profil"></a></small></div></div>'); $(function(){anzeige_video();});
$(function(){$('.button.titel').hide();});  
</script>
{{template==144.end}}
 



Schließen

YouTube-Videogalerie für das Xobor (v6) - Template!
Aktualisiert 11.03.24

Übersicht der Videogalerie!

• Die Alben Übersicht in der Videogalerie ist mit einem Vorschau-Video und einer Themenüberschrift ausgestattet!
• Die Doppelpfeile und die Themenbeschreibung führen zum Videoalbum!

Videofenster mit Titel und Videobeschreibung!

• Das Video hat eine Titel- und Videobeschreibung.
• Ist der Titel oder die Videobeschreibung länger als das Feld, wird das durch anhängende 3 Punkte gekennzeichnet.
• Der Ersteller ist zum Profil verlinkt!
• Das geöffnetes Videoalbum ist mit einer Themenüberschrift ausgestattet!
• Die YouTube-Videos lassen sich, wie gewohnt ohne Abstriche bedienen!

Ein Klick auf die Titel- und Videobeschreibung!

• Mit einem Klick auf Titel oder Beschreibung kann der komplette Text gelesen werden!
  Ein weiterer Klick schließt die Ansicht.

Unterstützte Templates!

• Damit das Plugin auch im V6 und Mobil funktioniert, muss unbedingt Mobile Template (177) mit einem Klick markiert werden!
• Soll das Plugin noch in andere Template aktiviert werden, strg/ctrl -Taste festhalten und das Template, das hinzukommt mit der Maus anklicken!

Schließen

Als erstes wird ein Plugin mit dem Name z.B. Videogalerie angelegt.
Hier wird ein Template-Element "Untere Leiste Header" > "bottom_header" erstellt und das folgende Skript eingetragen!






• In Zeile 4+5 wird das YouTube Infofenster angepasst.
• In Zeile 14+15 kann die Höhe und damit die Größe der Videos bestimmt werden!
• In Zeile 29 kann der Hintergrund angepasst werden!
• Zeile 93 sorgt dafür, dass alle gängigen YouTube-Videoadressen verarbeiten werden können!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
{{template==177.start}}
<style>
/* YouTube Video-Hinweis DSGVO */
div[data-name="youtube"] .context-notice {border-radius: 5px; box-shadow: 0.5rem 0.5rem 6px rgba(0, 0, 0, 0.6); border:5px double #aaaaaa !important; margin:7px 15px; max-width:300px;}
div[data-type="placeholder"] {display:inline-block;}
 
.catstats{background:#ffffff !important;opacity:0.9;color:#000000 !important}
.card{padding:0 !important;box-shadow: 2px 2px 5px #383838;cursor:default} 
.card-image-container {padding:0px  !important;}
.card-img-top {margin:0px  !important;} 
.gallery .hidden {color:#222222 !important;}
.gallerycat {margin-top:30px !important;}
 
.video_cover {width:102.5%;height:200px;}
.videoiframe {width:102.5%;height:200px;}
.videodivdiv h6 {width:102.5%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:8px 10px;text-align:center;background: #cccccc;margin:0px;z-index:999;cursor:pointer;}
.videodivdiv h6.activ {height:auto;white-space:normal;padding:6px 10px;margin:2px 5% !important;width:90%;border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;}
.videoinfo {width:102.5%;height:40px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:10px;background: #cccccc;font-size:13px;margin:0 0 0 0;z-index:999;cursor:pointer;}
.videoinfo.activ {height:auto;white-space:normal;position:absolute;margin-top:1.5% !important;left:5%;width:90%;border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;text-align:left;}
 
.pages .scndrow{display:none !important}
  
.thtitel {text-decoration:none !important;  line-height:30px;}
.thtitelhover {margin-top:5px;}
.thtitelhover:hover {background:#ffffff;}
.ThTitel {text-overflow:ellipsis;overflow:hidden;padding:1px 15px;font-size:13px;}
  
/* Forum-Hintergrund V6 */  
body {background: url('//files.homepagemodules.de/b214495/a_677_b71462b6.png') top left repeat #aaa;background-position: bottom;}
</style>
 
<script>
{{footerjs.start}}
{{footerjs}}
  
//Veränderung Navileiste Bilder- & Videogalerie
$("#link_gallery:contains('Bildergalerie'),#breadcrumbs a:contains('Bildergalerie')").text("Bilder- & Videogalerie");
$(".navbar-nav .dropdown-menu a:contains('Zur Bildergalerie')").html("Zur Bilder- & Videogalerie");
 
//Navileiste 
$('.video_galerie').before(`<nav id="breadcrumbs">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/"><span class="xob xob-lg xob-home"></span></a></li>
<li class="breadcrumb-item"><a href="/gallery.php">Bilder- & Videogalerie</a></li>
</ol></nav>
<div class="bg-light p-3 mb-3 cat-desc"><center><h4>`+daten.Ersteller_Titel+`</h4></center></div>
<br><div class="row"><div class="col-12"><h4 class="page-header">Videos <small class="d-block"><small>`+daten.ThInfo+`</small></small></h4></div></div>
`);
 
// Videogalerie ausblenden, wenn Bildergalerie aktiv ist
if ($('#emptycat,.page-header').length > 0) {
$('.videohide').hide();
};
 
// Video Dateneingabe //
function anzeige_video() {
$('.userinfo span').text(daten.Ersteller);
$('.videostyle .userinfo').attr('href',daten.Ersteller_Link);
  
$.each(daten.Titel, function(i) { 
$('#video_'+i+' .videodivdiv strong').text(daten.Titel[i]);
$('#video_'+i+' .videoiframe').attr({'src':daten.Video[i], 'data-src':daten.Video[i]});
$('#video_'+i+' .videoinfo').html(daten.VideoInfo[i]);
$('#video_'+i+' .userinfodate').text(daten.Ersteller_Datum[i]);
  
$('#video_'+i+' .videodivdiv h6, #video_'+i+' .videoinfo').click(function() {
$(this).toggleClass("activ");
$('#video_'+i+' .albumcreator').toggle();
});
});
};
anzeige_video();
 
//// Themenübersicht Dateneingabe ////
function anzeige_thema() {
 
$.each(daten.ThPage, function(i) { 
$('#VThema_'+i+' .ThErsteller span').text(daten.Ersteller[i]);
$('#VThema_'+i+' .ThErsteller').attr('href',daten.Ersteller_Link[i]);
 
$('#VThema_'+i+' .cat_covervideo a, #VThema_'+i+' a.thtitel').attr('href',daten.ThPage[i]);
$('#VThema_'+i+' .cat_covervideo .video_cover').attr('src',daten.ThStartVideo[i]);
$('#VThema_'+i+' .ThTitel').text(daten.ThTitel[i]);
$('#VThema_'+i+' .ThDatum').text(daten.Ersteller_Datum[i]);
$('#VThema_'+i+' .ThCount').text(daten.Anzahl_Videos[i]);
});
};
anzeige_thema();
 
{{footerjs.end}}
 
//// Videokonverter ////
window.addEventListener('load', function ( ) {$('.convert_youtube').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("/shorts/", "/embed/").replace(/&.+/g, '">');});});
</script>
{{template==177.end}}
 



Schließen




Als nächsten Schritt wird ein zweites Template-Element "Bildergalerie-Home Footer" > "gallery_footer" für die Themenübersicht benötigt!
Template-Element "Bildergalerie-Home Footer" > "gallery_footer" erstellen und das folgende Skript eingetragen!






• In Zeile 20+21 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 24-28 werden die Videodaten zum 1. Thema eingetragen.
• Die Videogalerie ist für 3 Themen mit je 2 Videos voreingestellt!
• Werden weitere Themen benötigt, müssen Zeile 23-30 kopiert und wiederholt eingetragen werden!
• In Zeile 24, 33, 42, ... führt die Verlinkung zu den Videos des Themas.
• Wichtig! Die Verlinkung in Zeile 24, 33, 42, ... muss mit der erstellten Videoadresse für "Eigene Seite" übereinstimmen (Installation Punkt 8)!
• Die Zahl vom Video-Link "/Video1.html, /Video2.html, ..." muss bei jedem weiteren Thema um 1 erhöht werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
{{template==177.start}}
<script>
{{footerjs.start}}
{{footerjs}}
 
$(".gallery #gallery_options_container h3.float-left").after(`<br><br>Hier finden Sie Bilder zum Lachen, zum Schmunzeln, witziges und humorvolles in allen Varianten.<br>Auch faszinierende Autos, Bauwerke, Brücken, Hotels, besondere Türme, Bilder zu Technik, Kunst, Natur und Ausgefallenes sind auch dabei.<br>Haben Sie selbst Bilder gemacht, dann sind Sie hier genau richtig!<br>`);
$(".gallery #gallery_options_container").append(`<br><div class="videohide"><h3>Videogalerie</h3>
Die neue Videogalerie hat viel zu bieten. Interessante Videos zu den verschiedensten Themen! <br>
Haben Sie selber ein interessantes Video gefunden, bitte im Forum per "<a href="/private_new.php?sendto=1&title=Habe ein interessantes Video gefunden!">Forum Mail</a>" bescheid sagen!
<div id="cat_container">
<div id="cat_content" class="container">
<div class="row video">
</div></div></div></div>`);
 
var divvideo = 'col-12 col-sm-6 col-xl-3 gallerycat text-center mb-2 mb-xl-4 fadeIn';
var daten = {Ersteller: [],Ersteller_Link: [],ThPage: [],ThStartVideo: [],ThTitel: [],Ersteller_Datum: [],Anzahl_Videos: []};
var them = 0;
 
// Erstellerdaten  
daten.Ersteller[them] = 'Name Album-Ersteller'; 
daten.Ersteller_Link[them] = '/u1_.html';
 
// Video-Thema 1 
daten.ThPage[them] = '/Video1.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 1';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
  
// Video-Thema 2
daten.ThPage[them] = '/Video2.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 2';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
 
// Video-Thema 3
daten.ThPage[them] = '/Video3.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 3';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
 
//// Ende der Dateneingabe ////   
 
$('.vid').html(`<div class="card albumcard hoverable  x-depth-1">
<div class="card-image-container cat_video" style="height:17rem;overflow:hidden;">
<div class="catstats text-right"><span class="ThCount"></span> <i class="far fa-image"></i></div>
<div data-name="youtube" data-modified-by-klaro="yes" class="cat_covervideo convert_youtube"><iframe data-name="youtube" data-modified-by-klaro="yes" class="video_cover" allowfullscreen></iframe></div>
<div class="thtitelhover"><a class="thtitel"><img src="//files.homepagemodules.de/b2001010/a_234.png"><img style="margin-left:-8px;" src="//files.homepagemodules.de/b2001010/a_234.png"><small>Weiter</small><h5 class="text-nowrap cmb-2 ThTitel"></h5></a></div>
</div>
<div class="card-text" style="margin:-8px 0 5px 0;">
<div class="albumcreator">
<a title="Zum Profil" class="userlink user_1 ThErsteller" style="color:#e6ab15;"><img class="img-responsive img-circle avatar avatar_round_xsmall" src="//files.homepagemodules.de/b610439/avatar-770eb768-98.jpg" style="margin:5px !important;"><span></span> - <span class="ThDatum" style="color:#e6ab15;"></span></a>
</div></div>
</div>`); 
 
{{footerjs.end}}
</script>
{{template==177.end}}
 


Schließen




Für jedes Video-Thema wird im Plugin eine "Eigene Seite" angelegt mit den Namen "video1.html", "video2.html", "video3.html" .....u.s.w.
Eigene Seite "video1" erstellen und alle 4 Kästchen anhaken!
Ebenso für "video2", "video3", ..... !
Jeweils das folgende Skript eintragen!
Für jedes weitere Video eine neue "Eigene Seite" erstellen, "video4", "video5", ....!






• In Zeile 15+16 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 17 wird nochmal der Titel des Thema eingetragen.
• In Zeile 18 wird die Beschreibung zum Thema eingetragen.
• In Zeile 21-24, 29-32 werden die Videodaten der einzelnen Videos zum Thema eingetragen.
• Die Videogalerie ist mit 2 Videos je Thema voreingestellt!
• Werden weitere Videos benötigt, müssen Zeile 20-26 kopiert und wiederholt eingetragen werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
{{template==177.start}}
<div class="container row mainrow p-0"><div class="container"><div id="cat_container"><div id="cat_content" class="container"><div class="row video_galerie"></div></div></div></div></div>
 
<script>
{{footerjs.start}}
{{footerjs}}
  
$(".firstrow").removeClass( "col-xl-8" )
 
var divvideo = 'col-12 col-sm-6 col-xl-3 gallerycat text-center mb-2 mb-xl-4 fadeIn'
var daten = {Titel: [],Video: [],VideoInfo: [],Ersteller_Datum: []}
var vid = 0;
  
// Erstellerdaten
daten.Ersteller = 'Name Video-Ersteller';
daten.Ersteller_Link = '/u1_.html';
daten.Ersteller_Titel = 'Thementitel 1';
daten.ThInfo = 'Beschreibung 1: In Arbeit!';
 
// Videodaten 1
daten.Titel[vid] = 'In Arbeit (Video 1)';
daten.Video[vid] = '//youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung 2: In Arbeit .........';
daten.Ersteller_Datum[vid] = '01.01.2020';
$('.video_galerie').append('<div id="video_'+vid+'" class="'+divvideo+' vid"></div>');
vid++;
  
// Videodaten 2
daten.Titel[vid] = 'In Arbeit (Video 2)';
daten.Video[vid] = '//youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung 3: In Arbeit .........';
daten.Ersteller_Datum[vid] = '01.01.2020';
$('.video_galerie').append('<div id="video_'+vid+'" class="'+divvideo+' vid"></div>');
vid++;
 
//// Ende Dateneingabe ////
 
               
$('.vid').html(`<div class="card albumcard hoverable">
<div class="card-image-container" style="height:20rem;overflow:hidden;">
<div class="videodivdiv"><h6><strong></strong><span></span></h6></div>
<div data-name="youtube" data-modified-by-klaro="yes" class="convert_div convert_youtube"><iframe data-name="youtube" data-modified-by-klaro="yes" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameborder="0" class="videoiframe"></iframe></div>
<div style="margin:-8px 0 5px 0;"><div class="videoinfo"></div></div>
<div class="card-text"><div class="albumcreator">
<span class="text-muted">
<a class="userlink user_1 userinfo" style="color:#e6ab15;"><img class="img-responsive img-circle avatar avatar_round_xsmall" src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" style="margin:5px;"><span></span></a> - <span class="userinfodate" style="color:#e6ab15;"></span></a>
</span>
</div></div>
</div></div>`);         
 
{{footerjs.end}}
</script>
{{template==177.end}}
 



Schließen