API tools faq
paste
Advertisement
MizunoBrasil

Youtube Videos Loop

MizunoBrasil
Sep 28th, 2024
52
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.78 KB | None | 1 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>Loop YouTube Videos</title>
  7.     <!-- Link para Google Material Icons -->
  8.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  9.     <style>
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             display: flex;
  13.             flex-direction: column;
  14.             align-items: center;
  15.             justify-content: center;
  16.             height: 100vh;
  17.             margin: 0;
  18.             background-color: #f0f0f0;
  19.         }
  20.  
  21.         h1 {
  22.             color: #333;
  23.         }
  24.  
  25.         .container {
  26.             text-align: center;
  27.         }
  28.  
  29.         .input-container {
  30.             display: flex;
  31.             justify-content: center;
  32.             align-items: center;
  33.             margin-bottom: 10px;
  34.         }
  35.  
  36.         input[type="text"] {
  37.             width: 300px;
  38.             padding: 8px 12px; /* Ajustando o padding para ficar alinhado */
  39.             border: 1px solid #ccc;
  40.             border-radius: 5px 0 0 5px;
  41.             outline: none;
  42.             font-size: 16px;
  43.         }
  44.  
  45.         button {
  46.             padding: 6px 12px; /* Alinhando o padding do botão */
  47.             background-color: #007BFF;
  48.             color: white;
  49.             border: none;
  50.             border-radius: 0 5px 5px 0;
  51.             cursor: pointer;
  52.             display: flex;
  53.             align-items: center;
  54.             justify-content: center;
  55.         }
  56.  
  57.         button:hover {
  58.             background-color: #0056b3;
  59.         }
  60.  
  61.         .material-icons {
  62.             font-size: 24px;
  63.         }
  64.  
  65.         iframe {
  66.             margin-top: 20px;
  67.             border: none;
  68.         }
  69.  
  70.         .hidden {
  71.             display: none;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76.     <div class="container">
  77.         <h1>Loop YouTube Vídeos</h1>
  78.         <div class="input-container">
  79.             <input type="text" id="youtubeUrl" placeholder="Cole a URL do vídeo do YouTube">
  80.             <button onclick="embedVideo()">
  81.                 <span class="material-icons">search</span>
  82.             </button>
  83.         </div>
  84.         <button id="copyButton" class="hidden" onclick="copyUrl()">Copiar URL do Vídeo</button>
  85.  
  86.         <div id="videoContainer"></div>
  87.     </div>
  88.  
  89.     <script>
  90.         let embedUrl = '';
  91.  
  92.         function embedVideo() {
  93.             var url = document.getElementById('youtubeUrl').value;
  94.             var videoId = extractVideoId(url);
  95.             if (videoId) {
  96.                 embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
  97.                 document.getElementById('videoContainer').innerHTML = `<iframe width="560" height="315" src="${embedUrl}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
  98.                 document.getElementById('copyButton').classList.remove('hidden'); // Mostrar o botão de copiar
  99.             } else {
  100.                 alert('Por favor, insira uma URL válida do YouTube.');
  101.             }
  102.         }
  103.  
  104.         function extractVideoId(url) {
  105.             var videoId = '';
  106.             var urlParts = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
  107.             if (urlParts[2] !== undefined) {
  108.                 videoId = urlParts[2].split(/[^0-9a-z_-]/i)[0];
  109.             } else {
  110.                 videoId = url;
  111.             }
  112.             return videoId;
  113.         }
  114.  
  115.         function copyUrl() {
  116.             navigator.clipboard.writeText(embedUrl).then(function() {
  117.                 alert("URL copiada para a área de transferência!");
  118.             }, function() {
  119.                 alert("Falha ao copiar a URL.");
  120.             });
  121.         }
  122.     </script>
  123. </body>
  124. </html>
  125.  
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!