Inserire un video MP4 su WordPress senza usare plugin

Inserire un video MP4 in WordPress senza ricorrere a plugin aggiuntivi, consente di ottenere un sito web leggero e senza dipendenze esterne. L’incorporazione di video sulle pagine web, oltre ad attirare i visitatori, migliora il posizionamento delle stesse sui motori di ricerca. In questa guida vedremo tre esempi di inserimento di video MP4 responsive mediante l’utilizzo di codice HTML e di codice CSS.

1 – Video MP4 responsive con AutoPlay ed anteprima senza controlli. Ideale per presentazioni a “tutto schermo”.

HTML

<div class="video-wrap"><video poster="/path/anteprima.jpg" 
preload="metadata" autoplay="autoplay" 
loop="loop" muted="" width="100%" height="100%">
<source src="/path/video.mp4" type="video/mp4" />
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.video-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9; usa 75% per 4:3 */
}
.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* o 'contain' se preferisci no crop */
}

2 – Video MP4 responsive con controlli senza anteprima. Ideale per essere inserito all’interno di un contenuto.

HTML

<div class="video-responsive">
<video controls>
<source src="/path/video.mp4" type="video/mp4">
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

3 – Video MP4 responsive con controlli ed anteprima. Ideale per essere inserito all’interno di un contenuto.

HTML

<div class="video-wrap">
<video controls preload="metadata" poster="/path/anteprima.jpg">
<source src="/path/video.mp4" type="video/mp4">
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 960px; /* opzionale: limita la larghezza */
  margin: 0 auto;
}
.video-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9; usa 75% per 4:3 */
}
.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* o 'contain' se preferisci no crop */
}