CSS slider with link to pop up video - html

Question

I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated
Here is my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:100%; class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="images/video_slider_button.jpg" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/toast_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
</ul>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Answer 1

Your problem seems to be an issue with an un-closed tag, here's some working code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div style="width:100%;" class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="http://via.placeholder.com/350x150?text=Video Slide" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide1" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide2" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide3" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide4" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide5" alt="Test" style="width:100%;">
</li>
</ul>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The issue I saw was that you never closed the quote for your div container, eg:
<div style="width:100%; class="container-fluid">
Should have been:
<div style="width:100%;" class="container-fluid">