TestFiddle
Test1
by Alija Resulovic
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="MainCenter">
<h1 align="center"> Search Our Videos </h1>
<div id="Table">
<table id="VideosSearch" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" >
<thead>
<tr>
<th>Title</th>
<th>Speaker</th>
<th>Date</th>
<th>Type</th>
<th>Download</th>
<th>
Watch Video
</th>
</tr>
</thead>
<tbody>
<tr >
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td >
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen class="embed-responsive-item" src="https://www.youtube.com/embed/Js9iFcNJUi4"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
#MainCenter{
width: 100%;
float: left;
background-color: seashell;
height: 100vh;
}
#Table{
width: 90%;
margin: 0 auto;
}
h1 {
color: #337ab7;
}
JavaScript
$(document).ready(function(){
$("#Nav3").addClass("active");
var MyTable = $('#VideosSearch').DataTable( {
"columns": [
null,
null,
null,
null,
null,
{ className: "none" }
]
});
//Code here?????
});