Inline Youtube Video

Youtub link mit einer css classe "youtube-play" in ein iFrame umwandeln

Java Script

https://www.youtube.com/watch?v=qQMBQeFmJIk

//youtub link classe youtube-play in ein iFrame umwandeln   
$(window).load(function(){
    $('.youtube-play').click();
});       
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url = this.href,
            yt_id = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box" style="background-image:url(https://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play">Video ansehen</span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<iframe class="youtube-frame" id="video1" src="https://www.youtube.com/embed/' + yt_id + '"></iframe>');
        });
    });
});
//youtub link classe youtube-play in ein iFrame umwandeln

CSS

/*VIDEO LINK ALS IFRAME*/
.youtube-box,
.youtube-frame {
  display:block;
  width:100%; /* video width */
  height:25em; /* video height */
  background-color:black;
  position:relative;
  border:none;
  margin:1em auto;
  background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;     
}

.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

.youtube-box .youtube-title {
  background-color:rgba(0,0,0,1);
  font:bold 15px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:30px;
  height:30px;
  overflow:hidden;
  padding:0px 15px; display: none;
}

.youtube-box .youtube-bar {
  background: #000;
  height:35px;
  top:auto;
}

.youtube-box .youtube-bar .yt-bar-left {
  background: #FFF;
}

.youtube-box .youtube-bar .yt-bar-right {
  background: #FFF;
}

.youtube-box .youtube-play {
  cursor:pointer;
  width:220px;
  height:1.4em;
  padding: 1em ;
  top:50%;
  left:50%;
  margin:-1.4em 0px 0px -110px;
  background: #999;
  color: #fff;
  text-align: center;
  text-transform: none;
}

.youtube-box .youtube-play:hover {
  background-color: #000;
}

@media screen and (max-width:480px) {
    
    .youtube-box,.youtube-frame {height:15em;}
    
}


CSS - Checkbox & Radio Buttons

Checkbox und Radio Buttons mit css stylen



CSS

AOS Animate On Scroll Library

Webseiten-Inhalte beim Scrollen einblenden



CSS Java Script

Random Content

Inhalte zufällig auslesen



Typo3 Typo Script

IMG_RESOURCE

Bild aus Seiten Ressourcen auslesen.



Typo Script

RTE CKEditor - Code-Snippet

Der seit TYPO3 8 verwendete RTE CKEditor kann sehr gut auf die eigenen Bedürfnisse konfiguriert…



Typo3 Typo Script

Sprachen Variablen ab Version 9

globalVar und Language



Typo Script

DSGVO-konform

Google Fonts lokal einbinden. Anstatt die Schriften vom Google Server zu laden, können diese auch…




Sitemap

Die XML-Sitemap richtig routen



Typo Script XML

Flexible Container und Grids

Wie man flexible seiteninterne Strukturen mit einer einfachen Erweiterung Core-nah hinzufügt.



Typo3 Typo Script PHP

Transfonter

Online Webfont Generator



CSS

SEO Typo3 News

Sitemap für News mit mehreren Landing Pages.




TYPO3 Installieren

Mit Symlinks ohne SSH per FTP installieren



PHP Typo3

Inline Youtube Video

Youtub link mit einer css classe "youtube-play" in ein iFrame umwandeln




Masonry

Masonry Anwendung für Typo3 tx_news Listen Ansicht.




Gridelements

Mittels der Extension Grid Elements erhält der TYPO3-Entwickler die Möglichkeit, komfortabel…



Typo3 Typo Script

Clickstorm SEO

cs_seo Extension optimiert SEO für TYPO3



Typo3

Slick Slider & News

Typo3 tx_news Listview Slider ohne Erweiterung erstellen, Beispiel mit dem Open Source Slick Slider.




tx_news verschiedene Bildgrössen

Bildgrösse anpassen in der ListView und der DetailView




tx_news Powermail

Felder von tx_news an Powermail übergeben, in diesem Fall für eine Event Anmeldung..



Typo3 Typo Script

Mehrere Detail Templates

Hier ist beschrieben, wie Ihr die Detail-Ansicht auf mehrere Templates aufbaut. Dieser Part…




Fluid Templates

Fluid Templates: HTML-Vorlagen als Grundgerüst der Webseite



Typo Script Typo3

Site Configuration ab TYPO3 Version 9

Seit Version 9.5 beherrscht TYPO3 "Sprechende URLs" ohne Erweiterungen. Ihr benötigt nur eine Site…




Jquery Beispiele

Mobile Menu, Menu .fadeToggle(), Responsive, window.matchMedia




Typo Script Basics

Random Content, Aktuelles Datum ausgeben, tx_news date, tx_news alle Kategorien ausgeben



Typo3 Typo Script

mp4 Video

Video full Screen einbinden




tx_news

Template Selector & Templates, show in all view default, tx_news alle Kategorien ausgeben




Page Transitions.

A simple and easy jQuery plugin for CSS animated page transitions




Partner & Links

Inspiration & Wissen.