Video responsive einbetten
Dabei unbedingt die Datenschutzbestimmungen beachten
* HTML-Code - Video responsive einbetten*/
<div class="responsive-video">
<iframe src="https://www.youtube-nocookie.com/embed/ZsK27uAc3b0?rel=0&showinfo=0" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
/* CSS Code - Video responsive einbetten */
.responsive-video iframe
{position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-video
{position: relative;
padding-bottom: 56.25%; /* Standard für Videos mit 1600x900 Pixel und 16:9 Bildschirmformat */
padding-top: 0px;
height: 0;
overflow: hidden;
}
<div class="responsive-video">
<iframe src="https://www.youtube-nocookie.com/embed/ZsK27uAc3b0?rel=0&showinfo=0" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
/* CSS Code - Video responsive einbetten */
.responsive-video iframe
{position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-video
{position: relative;
padding-bottom: 56.25%; /* Standard für Videos mit 1600x900 Pixel und 16:9 Bildschirmformat */
padding-top: 0px;
height: 0;
overflow: hidden;
}
Widget bzw. HTML-Box zentrieren/* HTML-Code - Box Zentrieren */ <div class="n"> <div style="text-align: center;"> Widget bzw. Box </div> </div> |
|
Fotos beim überfahren vergrößern und/oder austauschen
/* HTML-Code - Foto austauschen, vergrössern */
<ul class="foto">
<li>
<a href="#">
<img src="bild_klein.jpg" alt="kleines Bild">
<img src="bild_gross.jpg" alt="großes Bild" class="gross">
</a>
</li>
</ul>
/* CSS Code - Foto austauschen, vergrössern */
.foto
{margin: 0;
padding: 0;
}
.foto img
{border: none;
}
.foto li
{list-style: none;
position: relative;
}
a .gross
{display: none;
}
a:hover .gross
{display: block;
position: absolute;
top: 0;
left: 0;
}
Quelle: Ohne CSS hehts gar net http://www.ohne-css.gehts-gar.net/0074.php
<ul class="foto">
<li>
<a href="#">
<img src="bild_klein.jpg" alt="kleines Bild">
<img src="bild_gross.jpg" alt="großes Bild" class="gross">
</a>
</li>
</ul>
/* CSS Code - Foto austauschen, vergrössern */
.foto
{margin: 0;
padding: 0;
}
.foto img
{border: none;
}
.foto li
{list-style: none;
position: relative;
}
a .gross
{display: none;
}
a:hover .gross
{display: block;
position: absolute;
top: 0;
left: 0;
}
Quelle: Ohne CSS hehts gar net http://www.ohne-css.gehts-gar.net/0074.php
Meldungen (Werbung usw.) statisch einblenden
<div class="n">
<div style="position: fixed; top: 10%; z-index: 9;">
<div style="text-align: center; font-size:30pt; color: #ff0000; font: verdana; transform: rotate(353deg);">
<b>Neue Telefonnummer<br />
0 15 12 15 ?? ?? ?<br />
</div>
</div>
</div>
<div style="position: fixed; top: 10%; z-index: 9;">
<div style="text-align: center; font-size:30pt; color: #ff0000; font: verdana; transform: rotate(353deg);">
<b>Neue Telefonnummer<br />
0 15 12 15 ?? ?? ?<br />
</div>
</div>
</div>
HTML Link-TippsHTML-Seminar www.html-seminar.de |
CSS Link-TippsOhne CSS hehts gar net www.ohne-css.gehts-gar.net |
Welches HTML-Tipps gibt es?
Wie zentriert man ein Widget?
Wie bettet man Videos ein?
Vielleicht auch interessant: