API tools faq
paste
Advertisement
MizunoBrasil

youtube embed 2

MizunoBrasil
Feb 9th, 2025
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Postagem Simplificada</title>
  7.     <!-- Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  9.     <style>
  10.         body {
  11.             font-family: Helvetica, Arial, sans-serif;
  12.             font-size: 14px;
  13.         }
  14.  
  15.         .container {
  16.             max-width: 800px;
  17.             margin: 0 auto;
  18.             padding: 20px;
  19.         }
  20.  
  21.         form {
  22.             display: grid;
  23.             gap: 10px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.  
  29. <div class="container">
  30.     <h2>Cadastrar vídeo</h2>
  31.     <form action="#" method="POST">
  32.         <div class="form-group">
  33.             <label for="observacao">Código HTML Embed Gerado</label>
  34.             <textarea class="form-control" id="observacao" name="observacao" style="height: 200px;" required></textarea>
  35.         </div>
  36.  
  37.         <div class="form-group">
  38.             <label for="youtube_url">URL do YouTube:</label>
  39.             <div class="input-group">
  40.                 <input type="text" class="form-control" id="youtube_url" placeholder="Insira a URL do vídeo do YouTube" autocomplete="off">
  41.                 <div class="input-group-append">
  42.                     <button type="button" class="btn btn-secondary" id="colar_url">Colar URL</button>
  43.                     <button type="button" class="btn btn-secondary" id="gerar_embed">Gerar Embed YouTube</button>                    
  44.                 </div>
  45.             </div>
  46.         </div>
  47.  
  48.         <div class="form-group" id="video_container" style="display: none;">
  49.             <h4>Vídeo Embedado:</h4>
  50.             <div id="video_embed"></div>
  51.         </div>
  52.  
  53.         <button type="submit" class="btn btn-primary">Salvar</button>
  54.         <button type="button" class="btn btn-secondary" onclick="window.location.href='#'">Voltar</button>
  55.     </form>
  56. </div>
  57.  
  58. <!-- Bootstrap JS and dependencies -->
  59. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  60. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@1.16.1/dist/umd/popper.min.js"></script>
  61. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  62. <script>
  63.     document.getElementById('gerar_embed').addEventListener('click', function () {
  64.         const youtubeUrl = document.getElementById('youtube_url').value;
  65.         const observacao = document.getElementById('observacao');
  66.         const videoContainer = document.getElementById('video_container');
  67.         const videoEmbed = document.getElementById('video_embed');
  68.  
  69.         if (youtubeUrl) {
  70.             // Extrair o ID do vídeo do YouTube
  71.             const videoId = youtubeUrl.split('v=')[1]?.split('&')[0] || youtubeUrl.split('/').pop();
  72.  
  73.             if (videoId) {
  74.                 // Gerar o código embed
  75.                 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>`;
  76.  
  77.                 // Inserir no campo de observação
  78.                 observacao.value += embedCode;
  79.  
  80.                 // Mostrar o vídeo embedado
  81.                 videoEmbed.innerHTML = embedCode;
  82.                 videoContainer.style.display = 'block';
  83.             } else {
  84.                 alert('URL inválida. Por favor, insira uma URL válida do YouTube.');
  85.             }
  86.         } else {
  87.             alert('Por favor, insira a URL do vídeo do YouTube.');
  88.         }
  89.     });
  90.  
  91.     // Adicionar funcionalidade ao botão "Colar URL"
  92.     document.getElementById('colar_url').addEventListener('click', async function () {
  93.         try {
  94.             const text = await navigator.clipboard.readText();
  95.             document.getElementById('youtube_url').value = text;
  96.         } catch (err) {
  97.             alert('Não foi possível acessar a área de transferência. Certifique-se de que o navegador permite essa função.');
  98.         }
  99.     });
  100. </script>
  101. </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!