<!DOCTYPE html>
<html lang="pt-br">
<head id="teste">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="icon" type="iconVideo/img" href="/img/iconVideo.png" />
    <title>Videos</title>
</head>

<header class="header">
  <div class="center">
    <div class="menu" id="menuId" > 
      <ul id="navegacao">
        <li><a href="/"><strong">INICIO</strong></li>
        <li><a href="/filmes">FILMES</li>
        <li><a href="/series">SERIES</li>
        <li><a href="/livros">LIVROS</li>
        <li><a href="/carros">CARROS</li>
        <li><a href="/videos">VIDEOS</li>
          <li><button class="btn_cadastro"><a href="/cadastroVideo">CADASTRAR VIDEO</li></button>
      </ul>
    </div>
</header>
<% if(message != ""){ %>
  <section id="message">
    <p class="sucesso">Video cadastrado com sucesso!</p>
    <span id="close">&times;</span>
  </section>
  <% } %>
    
<body class="">
  <section class="wrapper">
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <div id="title"></div>

<section class="container">
  <% Videos.forEach((item) => { %>
  <ul>
    <div>
      <iframe src="<%= item.link %>" alt="<%= item.nome %>" /></iframe>
        </div>
        <div>
        <button class="btn_video">
          <a href="/detalhes/detalhesVideos/<%= item.ID %>" class="tagA">DETALHES</a></button></div>      
  </ul>  
  <% }) %>
</section>
</section>
<script src="/js/script.js"></script>
</body>
</html>