320NN Development Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.

====== Responsive Design ======

Unter //Responsive Design// versteht man das Anpassen eines Design an eine Bildschirmgröße. So werden bspw. Schriften für kleine Displays größer und unwichtige Elemente ausgeblendet.

===== Responsive YouTube-Videos =====

Damit sich YouTube-Videos in einem responsivem Website-Design einpassen, muss man sich eines kleines Tricks bedienen: Das Video muss in einen ''DIV''-Container eingebunden und darin skaliert werden.

<code html>
<div class="video-container">
	<iframe src="https://www.youtube.com/embed/YE7VzlLtp-4" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</code>

CSS:

<code css>
.video-container {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 30px;
	padding-bottom: 56.25%;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</code>

Quelle: [[http://avexdesigns.com/responsive-youtube-embed/|Avex Designs: Responsive YouTube videos with CSS]]

===== Links =====

==== Tutorials ====

=== Kostenpflichtige Tutorials ===

  * [[https://www.video2brain.com/de/videotraining/responsive-webdesign-das-grosse-training|video2brain: Responsive Design – Das große Training]]