HTML5 in 24 Hours

Hour 16 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

· 1 min read

Hour 16 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 16.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Video</title>
<style>
#main { width: 100%; }
video {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width:401px) {
  #main {
    max-width: 900px;
  }
}
</style>
</head>

<body>
  <div id="main">
  <h1>Ramblin' Rambler</h1>
  <video controls>
    <source src="images/rambler2006.mp4">
  </video>
  </div>
</body>
</html>

Listing 16.2

#videoBG { 
  position: absolute; 
  top: 0;
  left: 0; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden; 
}

Listing 16.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive YouTube Embedded Video</title>
<style>
#main { width: 100%; }
.videoContainer {
  position: relative;
  padding-bottom: 55%;
  height: 0;
  overflow: hidden;
}
.videoContainer iframe, 
.videoContainer object,
.videoContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width:401px) {
  #main {
    max-width: 900px;
  }
}
</style>
</head>

<body>
  <div id="main">
  <h1>Cruising with a Drone</h1>
    <div class="videoContainer">
      <iframe width="853" height="480" 
      src="http://www.youtube-nocookie.com/embed/eGFGG-xKT\_A" 
      frameborder="0" allowfullscreen></iframe>    
    </div>
  </div>
</body>
</html>