Kategorie: CSS

responsive YouTube Video einbinden
Mit ein par CSS Eigenschaften und einem div kannst du YouTube Videos responsive auf deine eigene Seite einbetten. Responsive bedeutet, dass das Video sich der Breite des Bildschirmes anpasst. Sprich für Mobile Endgeräte sowie für den Desktop ein guten Eindruck hinterlässt.

Jetzt zeige ich dir, wie du ein YouTube Video einbettest, das sich bis 560px Breite an die Breite des Bildschirms anpasst und ab 560px Breite eine feste Größe bekommt und sich zentriert.

Schritt 1: gehe auf Youtube

Gehe auf YouTube und kopiere dort den Einbettcode aus der teilen Box

Schritt 2: CSS Code kopieren und speichern

Speicher den CSS Schnipsel in deine .css Datei. Wenn du WordPress benutzt, kannst du auch den CSS Schnipsel unter „Design -> Customizer -> Zusätzliches CSS“ speichern.
```
.yt_box{
  position: relative;
  max-width: 560px; /* wie breit soll das Video maximal sein */
  margin: auto;
}
.yt_box:before{
  content: "";
  display: block;
  padding-top: 56%; /* 16:9 Format */
}
.yt_box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}
```
Schritt 3: div Element um den Iframe

Das Iframe musst du ohne Höhe und Breite speichern, dazu die Attribute width=“560″ height=“315″ löschen. Danach musst du ein div Element um das Iframe schließen und dem div Element die Klasse yt_box geben.
```
<div class="yt_box">
  <iframe 
    src="https://www.youtube.com/embed/a_426RiwST8" 
    frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>
```
Beispiel
Januar 13, 2019
CSS Styles definieren
Übersicht von Styleanwendungen auf verschiedene Objekte. Es wird erklärt wie auf Class , ID , HTML Tag Styles übertragen werden. Des weiteren wird noch das :hover genauer erklärt.

Class – .class

Eine class erstellen: freestyle
```
.freestyle{font-size:30px;}
```
```
<span class="freestyle">Hello World</span>
<span class="freestyle">Hello World</span>
```
Klassen sind mehrfach auf Objekte anwendbar.

ID – #ID

ID: freestyle
```
#freestyle{font-size:30px;}
```
```
<span id="freestyle">Hello World</span>
```
Es darf nur ein Element mit der selben ID existieren.

HTML-Tag – TAG

HTML-Tag: h2
```
h2{font-size:30px;}
```
```
<h2>Hello World</h2>
```
Dieser Style wird auf jedes h2 Element auf der Seite übertragen.

hover – STATE
```
a{text-decoration:none;}
a:hover{text-decoration:underline;}
```
```
<a href="#">dies ist ein Link</a>
```
dies ist ein Link

:nth-child(an+b)

Mit :nth-child kann auf jedes xte Sub-Element zugegriffen werden, dies bedeutet es kann z.B. jedes 2te Element angesprochen werden.
```
.freestyle a:nth-child(2n+0) {
  background-color: red;
}
```
```
<div class="freestyle">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>
```
Link 1 Link 2 Link 3 Link 4 Link 5
```
.freestyle a:nth-child(2n+1) {
  background-color: red;
}
```
```
<div class="freestyle">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>
```
Link 1 Link 2 Link 3 Link 4 Link 5

:nth-of-type(an+b)

Bei nth-of-type wird nach einem bestimmten Objekt gefiltert, dies bedeutet es muss nicht unbedingt ein direktes Sub-Elment von der Klasse sein.
```
.freestyle p:nth-of-type(2n+0) {
  color: red;
}
```
```
<div class="freestyle">
  <p>P-Tag 1</p>
  <p>P-Tag 2</p>
  <p>P-Tag 3</p>
  <p>P-Tag 4</p>
</div>
```
P-Tag 1

P-Tag 2

P-Tag 3

P-Tag 4

CSS Tutorial

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Klassen kombinieren
Oktober 10, 2017
CSS mehrere Transition versetzt starten
Bei diesem Beispiel wird ein blaues Rechteck über das hover-Event zuerst transparent, danach ändert es die Höhe.
```
div {
    width: 100px;
    height: 100px;
    background: #009ee0;
    opacity: 1;
    transition: 1s 1s height ease, 1s 0s opacity ease;
    display: block;
}
div:hover {
    opacity: 0.5;
    height: 150px;
}
```
Code-Erklärung um dies zu verstehen
```
div {
    transition:   1s       1s      height  ease, 1s 0s opacity ease;
    //          dauer verzögerung   Was    type, -||-
}
```
Anfangseffekt auch als Endeffekt

Da das hover-Event die Ausgangswerte von „transition“ überschreibt, muss der Startwert auf das hover-Event gesetzt werden und der invertierte Wert auf den Normalzustand.
```
div {
    width: 100px;
    height: 100px;
    background: #009ee0;
    opacity: 1;
    transition: 1s 0s height ease, 1s 1s opacity ease;
    display: block;
}
div:hover {
    opacity: 0.5;
    height: 150px;
    transition: 1s 1s height ease, 1s 0s opacity ease;
}
```
CSS Tutorial

Voriger Schritt: CSS Flexbox Tutorial

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS: Checkbox styling
September 4, 2017