{% extends 'app/base.html' %}

{% block content %}
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Rating</th>
        <th scope="col">Views</th>
        <th scope="col">Thumbnail</th>
        <th scope="col">Video</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Detox Cabbage Soup recipe</td>
        <td>Ratings</td>
        <td>Views</td>
        <td><img src="https://i.ytimg.com/vi/ZbZQ1YPVHKs/mqdefault.jpg" width="420" height="315" alt="Video Thumbnail" class="img-thumbnail"></td>
        <td>
            <iframe width="420" height="315"src="https://www.youtube.com/embed/{{ youTubeId }}">
            </iframe>
        </td>
      </tr>
    </tbody>
  </table>
{% endblock content %}