Códigos para Incorporação de Vídeos no Blogger

CSS para vídeos responsivos e botões: colar antes de ]]></b:skin>

/* CSS para vídeos responsivos e botões */ .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .video-wrapper iframe, .video-wrapper object, .video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .titulo-video { text-align: center; font-weight: normal; font-size: 1.1em; margin: 1em 0 0.5em 0; font-family: Verdana, sans-serif; } .videoTitle { text-align: center; cursor: pointer; color: blue; text-decoration: underline; margin: 10px 0; } button.copiar { margin-top: 6px; padding: 6px 14px; background: #4285f4; color: white; border: none; border-radius: 3px; font-size: 13px; cursor: pointer; } button.copiar:hover { background: #3367d6; }

Player Simples do YouTube: colar no corpo do post

<!-- Vídeo incorporado com acessibilidade --> <div class="titulo-video">Título do vídeo</div> <div class="video-wrapper"> <iframe allowfullscreen title="Título do vídeo" frameborder="0" src="https://www.youtube.com/embed/ID_DO_VIDEO"></iframe> </div> <!-- Dados estruturados para SEO --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Título do vídeo", "description": "Descrição breve do vídeo.", "thumbnailUrl": "https://i.ytimg.com/vi/ID_DO_VIDEO/hqdefault.jpg", "uploadDate": "2023-12-01T00:00:00+00:00", "duration": "PT__M__S", "embedUrl": "https://www.youtube.com/embed/ID_DO_VIDEO", "contentUrl": "https://www.youtube.com/watch?v=ID_DO_VIDEO" } </script>

Player Simples do Vimeo: colar no corpo do post

<!-- Vídeo incorporado com acessibilidade --> <div class="titulo-video">Título do vídeo no Vimeo</div> <div class="video-wrapper"> <iframe allowfullscreen title="Título do vídeo no Vimeo" frameborder="0" src="https://player.vimeo.com/video/ID_DO_VIMEO"></iframe> </div> <!-- Dados estruturados para SEO --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Título do vídeo no Vimeo", "description": "Descrição breve do conteúdo.", "thumbnailUrl": "https://vumbnail.com/ID_DO_VIMEO.jpg", "uploadDate": "2024-03-01T00:00:00+00:00", "duration": "PT__M__S", "embedUrl": "https://player.vimeo.com/video/ID_DO_VIMEO", "contentUrl": "https://vimeo.com/ID_DO_VIMEO" } </script>

Player com Vários Vídeos (Youtube e Vimeo): colar no corpo do post

<div class="titulo-video">Seleciona um vídeo</div> <div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=YJ9W2pZwvlY')">Vídeo 1 (YouTube)</div> <div class="videoTitle" onclick="playVideo('https://vimeo.com/524933864')">Vídeo 2 (Vimeo)</div> <div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=Eld7o9vZcnI')">Vídeo 3 (YouTube)</div> <div id="videoPlayer"></div> <script> function playVideo(videoUrl) { var player = document.getElementById('videoPlayer'); if (videoUrl.includes('youtube.com')) { var videoId = videoUrl.split('v=')[1]; player.innerHTML = `<div class="video-wrapper"><iframe title="Vídeo do YouTube" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe></div>`; } else if (videoUrl.includes('vimeo.com')) { var videoId = videoUrl.split('vimeo.com/')[1]; player.innerHTML = `<div class="video-wrapper"><iframe title="Vídeo do Vimeo" src="https://player.vimeo.com/video/${videoId}" frameborder="0" allowfullscreen></iframe></div>`; } else { player.innerHTML = 'URL de vídeo não suportado.'; } } window.addEventListener('DOMContentLoaded', function() { playVideo('https://www.youtube.com/watch?v=YJ9W2pZwvlY'); }); </script> <!-- SEO para o primeiro vídeo --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Título do vídeo 1", "description": "Descrição do vídeo carregado inicialmente.", "thumbnailUrl": "https://i.ytimg.com/vi/YJ9W2pZwvlY/hqdefault.jpg", "uploadDate": "2022-11-01T00:00:00+00:00", "duration": "PT__M__S", "embedUrl": "https://www.youtube.com/embed/YJ9W2pZwvlY", "contentUrl": "https://www.youtube.com/watch?v=YJ9W2pZwvlY" } </script>

Player com uma Playlist do YouTube: colar no corpo do post

<!-- Playlist com acessibilidade --> <div class="titulo-video">Playlist: Nome da Coleção</div> <div class="video-wrapper"> <iframe allowfullscreen title="Playlist do YouTube" frameborder="0" src="https://www.youtube.com/embed/videoseries?list=ID_DA_PLAYLIST"></iframe> </div> <!-- Dados estruturados para SEO --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Nome da Coleção", "description": "Descrição breve da playlist e seus vídeos.", "thumbnailUrl": "https://i.ytimg.com/vi/ID_DE_UM_VIDEO_DA_PLAYLIST/hqdefault.jpg", "uploadDate": "2024-01-01T00:00:00+00:00", "duration": "PT__M__S", "embedUrl": "https://www.youtube.com/embed/videoseries?list=ID_DA_PLAYLIST", "contentUrl": "https://www.youtube.com/playlist?list=ID_DA_PLAYLIST" } </script>