HTML Code to review Part 1 Lessons
I’ve been reviewing the Part 1 Lessons to prepare for the class and wanted a re-sizable browser window with nothing but the class video. So I’ve written this handy HTML file, just save the code below to a file called “class.html” or something else and double click on it to run it. You can select any class from the buttons tab on top of the video.
<html>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div>
<button onclick='changeIFrame("https://www.youtube.com/embed/IPBSB1HLNLo")'>Lesson 1</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/JNxcznsrRb8")'>Lesson 2</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/9C06ZPF8Uuc")'>Lesson 3</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/gbceqO8PpBg")'>Lesson 4</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/J99NV9Cr75I")'>Lesson 5</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/sHcLkfRrgoQ")'>Lesson 6</button>
<button onclick='changeIFrame("https://www.youtube.com/embed/H3g26EVADgY")'>Lesson 7</button>
<div class="video-container">
<iframe id="classVideo" width="1280" height="720" src="https://www.youtube.com/embed/IPBSB1HLNLo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<!-- List of videos in order -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/IPBSB1HLNLo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/JNxcznsrRb8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/9C06ZPF8Uuc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/gbceqO8PpBg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/J99NV9Cr75I" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/sHcLkfRrgoQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!--<iframe width="1280" height="720" src="https://www.youtube.com/embed/H3g26EVADgY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
</div>
<div>
<script>
function changeIFrame(newURL)
{
console.log("Changing URL to "+newURL)
document.getElementById("classVideo").src=newURL;
}
</script>
</html>