API tools faq
paste
MizunoBrasil

Formulário HTML com Geração Automática de Embed do YouTube

MizunoBrasil
Jan 12th, 2025
16
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.13 KB | None | 0 0
raw download clone embed print report
  1. <!-- código que após informado a url de um vídeo no youtube, gera o embed para ser inserido em uma postagem  -->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="pt-BR">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Nova Postagem</title>
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  11.     <style>
  12.         body {
  13.             font-family: Helvetica, Arial, sans-serif;
  14.             font-size: 14px;
  15.         }
  16.  
  17.         .container {
  18.             max-width: 800px;
  19.             margin: 0 auto;
  20.             padding: 20px;
  21.         }
  22.  
  23.         form {
  24.             display: grid;
  25.             gap: 10px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div class="container">
  32.     <h2>Nova Postagem</h2>
  33.     <form action="processar_cadastro.php" method="post" enctype="multipart/form-data">
  34.  
  35.         <?php
  36.        $assunto = ["Inteligência Artificial", "Comédia", "Cinema", "Comportamento", "Esportes", "Downloads (Programas PC)", "Downloads (Programas APK)", "Downloads (Filmes)", "Fotos", "Programação", "Rock and Roll", "Streaming", "Youtube"];
  37.        ?>
  38.         <div class="form-group">
  39.             <label for="categoria">Selecione a categoria</label>
  40.             <select class="form-control" id="categoria" name="categoria">
  41.                 <?php foreach ($assunto as $c) { ?>
  42.                     <option value="<?= $c; ?>"> <?= $c; ?> </option>
  43.                 <?php } ?>
  44.             </select>
  45.         </div>
  46.  
  47.         <div class="form-group">
  48.             <label for="nome_arte">Nome da Imagem:</label>
  49.             <input type="text" class="form-control" id="nome_arte" name="nome_arte" required>
  50.         </div>
  51.  
  52.         <div class="form-group">
  53.             <label for="arquivo_arte">Upload de Imagem:</label>
  54.             <input type="file" class="form-control-file" id="arquivo_arte" name="arquivo_arte" accept="image/*" required>
  55.         </div>
  56.  
  57.         <div class="form-group">
  58.             <label for="frase_criadora">Prompt:</label>
  59.             <textarea class="form-control" id="frase_criadora" name="frase_criadora" required></textarea>
  60.         </div>
  61.  
  62.         <div class="form-group">
  63.             <label for="observacao">Observação/Postagem:</label>
  64.             <textarea class="form-control" id="observacao" name="observacao" style="height: 200px;" required></textarea>
  65.         </div>
  66.  
  67.         <div class="form-group">
  68.             <label for="youtube_url">URL do YouTube:</label>
  69.             <div class="input-group">
  70.                 <input type="text" class="form-control" id="youtube_url" placeholder="Insira a URL do vídeo do YouTube">
  71.                 <div class="input-group-append">
  72.                     <button type="button" class="btn btn-secondary" id="gerar_embed">Gerar Embed YouTube</button>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.  
  77.         <div class="form-group">            
  78.             <a href="http://fotos.000.pe/gera-link.html" target="_blank">Gerador de links caso seja necessário</a>
  79.         </div>
  80.  
  81.         <div class="form-group">            
  82.             <a href="https://pixhost.to" target="_blank">Hospedagem de imagens <strong>pixhost.to</strong></a>
  83.         </div>  
  84.  
  85.         <div class="form-group">            
  86.             <a href="http://fotos.000.pe/target-blank.html" target="_blank">com target blank (útil para imagens postadas no pixhost.to)</a>
  87.         </div>        
  88.        
  89.         <button type="submit" class="btn btn-primary">Cadastrar</button>
  90.     </form>
  91. </div>
  92.  
  93. <!-- Bootstrap JS and dependencies -->
  94. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  95. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@1.16.1/dist/umd/popper.min.js"></script>
  96. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  97. <script>
  98.     document.getElementById('gerar_embed').addEventListener('click', function () {
  99.         const youtubeUrl = document.getElementById('youtube_url').value;
  100.         const observacao = document.getElementById('observacao');
  101.  
  102.         if (youtubeUrl) {
  103.             // Extrair o ID do vídeo do YouTube
  104.             const videoId = youtubeUrl.split('v=')[1]?.split('&')[0] || youtubeUrl.split('/').pop();
  105.  
  106.             if (videoId) {
  107.                 // Gerar o código embed
  108.                 const embedCode = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" src="https://www.youtube.com/embed/${videoId}?rel=0" scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;" allowfullscreen="allowfullscreen"></iframe></div>`;
  109.  
  110.                 // Inserir no campo de observação
  111.                 observacao.value += embedCode;
  112.             } else {
  113.                 alert('URL inválida. Por favor, insira uma URL válida do YouTube.');
  114.             }
  115.         } else {
  116.             alert('Por favor, insira a URL do vídeo do YouTube.');
  117.         }
  118.     });
  119. </script>
  120. </body>
  121. </html>
  122.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!