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

Composição com folhas de códigos HTML e os logos do Portal Splish Splash e do 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>

Guardar Publicação É necessária uma conta gratuita no Raindrop.io

Enviar um comentário

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

Comentários