Exercise 11: YouTube Video Link Parameters (WP)

 


HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Linking Videos </title>
<link rel="stylesheet" href="Exercise 11 Audio Video.css">
</head>

<body>

<div class="navbar">
<a href="#home">Home</a>
<a href="https://finalssss009.blogspot.com/" >About</a>
<a href="https://finalssss009.blogspot.com/">Contacts</a>
</div>

<div id="row1" class="row">
<div class="column1">

</div>
<div id="row1" class="row">
<div class="column2">
<h1 id="home"> HOME </h1> <h3> I wanna share some videos! ☺ </h3>
<hr>
<h1> short films </h1>
<p> This video will autoplay but is muted </p>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/Ib-PPfd29-E?autoplay=1&mute=1">
</iframe>
<hr>
<h1> skits I do when I'm bored </h1>
<p> This video is looped </p>
<iframe width="420" height="315" 
src="https://www.youtube.com/embed/Ny6k_Nw-Giw?loop=1">
</iframe>
<hr>
<h1> MY game plays </h1>
<p> This video does not display controls </p>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/a0zypr2yu3k?controls=0">
</iframe>
</div>
<div id="row1" class="row">
<div class="column3">

</div>
<footer id="footer" style="background-color:#fcba03;padding: 20px;">
<p style="margin-left: 65px;color:#ffffff;"> my website </p>
<a href="https://finalssss009.blogspot.com//" style= "margin-left:70px;color: #ffffff;">   👋 blogger </a> <br>

</footer>
</body>
</html>

CSS

* {
box-sizing: border-box;
}

body, html {
background-color: #74aab0;
height: 100%;
min-height: 100vh;
margin: 0;
position: relative;
font-family: "Franklin Gothic Medium";
background-repeat: no-repeat;
padding-bottom: 30px;

}

iframe:focus {
outline: none;
}

iframe[seamless] {
display: block;
}

.navbar {
overflow: hidden;
background-color: #fcba03;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ff546b;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #ffa38c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ffcba6;
}

.dropdown:hover .dropdown-content {
display: block;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

.column1 {
float: left;
width: 2%;
background-color: #ffffff;
height: 10px;
}

.column2 {
border: 10px solid #ffffff;
float: left;
width: 96%;
padding-left: 25px;
padding-right: 25px;
}

.column3 {
float: right;
width: 2%;
background-color: #ffffff;
height: 10px;
}

[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

#footer { 
position: relative;
height: 150px;
margin-top: -100px;
clear: both;
background-color:#fcba03;
}

Comments

Post a Comment

Popular posts from this blog

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Read more

Exercise 12 Responsive Web Page Design (WP)

Image
  HTML <!DOCTYPE html> <html> <head>     ​<meta name="viewport" content="width=device-width, initial-scale=1"> <style> fieldset     { background: #9e4333;       }                body {background-color: #00A4E4;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   float: left;   font-size: 16px;   color: #9e4333;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color:#9e4333;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0;...
Read more

Exercise 12 Chat box (IMD)

Image
  HTML___ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Message Box </title> <link rel="stylesheet" href="Exercise 012 Chat box css.css"> </head> <body> <section> <h1> HI! Welcome to Alexa 👩 click the button to assist you </h1> <button class="chat-btn"> <b> CHAT </b> </button> <div id="chat-container" onclick="changeColor()" class="chat-popup"> <div class="chat-area"> <div class="income-msg"> <img src="https://i.ibb.co/31dgnVS/rikkaasa.png" class="Alexa" alt="Alexa"> <span class="msg"> What can I help you?  </span> </div> </div> <div class="input-area"> <input id="name-input" t...
Read more