I am building a video FAQ page for my website.
My objective is to have an embedded Youtube video at the top of the page with a list of questions underneath it. When a user clicks on a specific question, I'd like the page to refresh and display the video that corresponds with that question shown in the place where I have the youtube embedded at the top of the page.
Has anyone done this before and have any suggestions on how to make this happen?
You can code it in this way
<!DOCTYPE html>
<html>
<body>
<iframe id="youtube" width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
<h2>something</h2>
<p onclick=qus1()>Question 1</p>
<p onclick=qus2()>Question 2</p>
<script>
function qus1(){
document.getElementById('youtube').src="https://www.youtube.com/embed/GibiNy4d4gc?autoplay=1";
}
function qus2(){
document.getElementById('youtube').src ="https://www.youtube.com/embed/o6Jo2hW6gHI?autoplay=1";
}
</script>
</body>
</html>