Kategori: HTML

Kategorier
CSS HTML

Responsiv video embed

Embedded video fra Youtube eller Vimeo er som udgangspunkt ikke responsivt, men har en fast størrelse. Nedenstående gør at videoen tilpasser sig den container den ligger i.

HTML:



<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Kategorier
CSS HTML

HTML5 side skabelon

Tom html5 skabelon med viewport og link til stylesheet.

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">

</div>
</body>
</html>