CSS Slider mit Link zum Aufrufen des Videos

Question

Ich versuche, einen Link zu einem Popup-Video in meinem CSS-Slider zu erstellen. Ich kann den Link nicht zur Arbeit bringen. Es scheint eine einfache Aufgabe zu sein, aber es funktioniert einfach nicht als Bindeglied. Jede Beratung wäre wirklich zu schätzen

Hier mein 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

Ihr Problem scheint es ein Problem mit einem nicht geschlossenen Tag zu sein, hier einige Arbeitscode:

<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>

Ich

Das Problem sah, war, dass man nie das Angebot für Ihren div Behälter geschlossen, zB:

<div style="width:100%; class="container-fluid">
Sollte gewesen:
<div style="width:100%;" class="container-fluid">