Prova video per tema siti scolastici
In questa pagine vediamo come inserire un video. Questo tutoriale va bene anche in caso di articoli (notizie).
Video disposto orizzontalmente
Sotto inseriamo il video che supponiamo sia orizzontale. Per vederlo bene da cellulare senza dove fare scrolling orizzontale useremo lo script consigliato da Marisa Alario:
<div class="col-12 col-md-8">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="url video privacy" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></div>
Dovremo sostituire alla parte evidenziata l’url che troviamo in Condividi, dopo avere selezionato l’iconcina “Abilita modalità di privacy avanzata“.
Sequenza di operazioni da eseguire
- Incollo nel punto della pagine dove voglio mettere il video il codice riportato prima:
<div class="col-12 col-md-8">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="url video privacy" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></div> - visualizzo video Youtube
- clicco su Condividi
- seleziono Incorpora
- nello script, a fianco (Incorpora video) flaggo “Abilita modalità di privacy avanzata”
- Copio, dallo script, l’url riportata in src tra i doppi apici; ad esempio https://www.youtube-nocookie.com/embed/QIqSwI5PCbI?si=W1Qh8TkczVuzyTg2
- Incollo il link al posto della parte evidenziata in giallo nello script riportato sopra (url video privacy)
- aggiungo &rel=0 (zero non la lettera “o”) alla fine del link, in moda da mostrare, al termine della visione del video, solo video del tuo canale, evitando altri che potrebbero essere non adatti.
- otterrò un codice tipo quello riportato sotto
<div class="col-12 col-md-8">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/QIqSwI5PCbI?si=W1Qh8TkczVuzyTg2&rel=0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></div>
Esito visualizzazione video
Nell’esempio è riportato il tutorial Comunicazione inclusiva nei social: da immagine a testo
Prova a vedere la resa sia da pc sia da mobile.
Video disposto verticalmente
Sotto inseriamo il video che supponiamo sia verticale. Per vederlo bene da cellulare senza dove fare scrolling orizzontale ci avvarremo di un mix delle indicazioni che ho ricevuto da Caterina Toccafondi e Paola Marianelli.
Anche in questo caso dovrò rispettare le indicazioni privacy. Rispetto al caso precedente, incollerà direttamente il codice visualizzato da Youtube con la sola avvertenza di invertire larghezza e altezza.
Sequenza di operazioni da eseguire
- Mo sposto nel punto della pagine dove voglio mettere il video
- visualizzo video Youtube
- clicco su Condividi
- seleziono Incorpora
- nello script, a fianco (Incorpora video) flaggo “Abilita modalità di privacy avanzata”
- Copio, dallo script, l’url riportata. Ad esempio:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/0fYlMvPMEUo?si=2d3LpVlt7xJ8jYEB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
- Inverto i valori di width e height e aggiungo &rel=0 (zero non la lettera “o”) alla fine del link, in moda da mostrare, al termine della visione del video, solo video del tuo canale, evitando altri che potrebbero essere non adatti, ottenendo
<iframe width="315" height="560" src="https://www.youtube-nocookie.com/embed/0fYlMvPMEUo?si=2d3LpVlt7xJ8jYEB&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Esito visualizzazione video
Nell’esempio è riportato il tutorial Comunicazione inclusiva nei social: da immagine a testo
Prova a vedere la resa sia da pc sia da mobile.
