Come fermare un video inserito in stile righe 
Author: Antonino B.
Visited 1349,
Followers 1,
Shared 0
Buongiorno a tutti, vorrei porvi questo quesito:
Ho inserito un brevissimo video (11 secondi) in "stile righe" con l'opzione "video di youtube" bene, il video si visualizza correttamente ma si riproduce in continuo, ed al contrario vorrei che chi lo visualizza potesse in qualche modo interrromperlo a suo piacimento.
Ho provato a cercare qualche opzione sia in website sia in youtube, ma non sono riuscito a trovare niente, avete qualche suggerimento in merito per ovviare a questo?
Grazie
Posted on the
... sopra al video di sfondo hai altri oggetti...?...
... se sì, allora non puoi usare controlli video...
... altrimenti devi usare il video YT con il codice di condivisione in IFRAME, e con codice EXTRA estendere il video a tutta larghezza...
... in questi casi è sempre bene postare il LINK per poter valutare...
.
Author
Ciao KolAsim, è un piacere risentirti, come dici perlappunto sopra al video ho impostato un oggetto testo con un piccolo contenuto in basso, dici che è quello?
link alla pagina
@Antonino, io inserito video mp4 non posso fermarlo , se inserisco video youtube hai il bottone.
pero inserendo sopra il video un immagine solo in antperima funziona quando va online si sente ma non si carica il video , parlo del mp4. video youtube si addatta poi diversamente in responsive. ma non parte in auto.
il problema di non caricare il video se si inserisce un'immagina x l'antperima , ho già segnalato tempo fa per ws13 che era funzionante per un periodo , poi dopo gli utlimi aggiornamenti se ne son andati di nuovo. mi hanno risposto, che stanno elaborando la richiesta di risolvere il problema. c'è solo da aspettare ;-)
Author
Ciao Kris, il mio problema non è quello del caricamento, il video lo vedo benissimo sia .mp4 che .avi, solo che vorrei far si che il visitatore del sito possa fermarlo quando vuole dato che ricarica di continuo, penso che KolAsim abbia capito quello che voglio dire, attendo il suo parere. Anzi vorrei aggiungere che ho provato ad utilizzare il codice IFRAME di YT e con questa opzione i comandi si vedono, ma le dimensioni sono piccole, non è responsive, ed inoltre al termine del video stesso mi appaiono le anteprime di altri video che non vorrei vedere!
ciao,...sì, penso che dipenda dagli oggetti sovrastanti o contenuti nella riga che sovrastano il video, del resto, per gli sfondi non esistono controlli attivabili se non proprio via JS extra e progettati ad hoc...
... nel tuo video, usando la stringa del URL, vedo che il controllo STOP/PLAY funziona...
(... nota che attualmente se stringi la pagina si formano bande nere sopra e sotto il video... (occorrerebbe un controllo JS per mantenere l'aspetto ratio...)
... potresti usare lo stesso IFRAME in un oggetto Codice HTML che prenda tutta la larghezza ed altezza della riga, e poi con un piccolo e semplice codice estendere il video a tutta larghezza della finestra...
... casomai, se lo farai, posta il link per vedere i nuovi oggetti in giogo per valutare il codice adatto...
ciao
...PS: ...!... considera che il video di sfondo non si attiverà nei dispositivi "mobile", ... e nel caso sarebbe meglio utilizzare uno slideshow che potesse simulare la stessa sequenza o simile, ottenendo magari un effetto ancora migliore, e soprattutto compatibile con il mobile", ...oppure utilizzare WebAnimator per creare l'animazione, se puoi... (con SwishMax sarebbe stato un giochetto!!!)
.
Author
Ho visto le bande nere sopra e sotto, in effetti sarebbe più gradevole se fosse responsive....ho già provato l'IFRAME di YT ma non è di mio gradimento perchè quando finisce mi fa vedere le anteprime di altri video, per quanto riguarda l'inserimento di altri codici, devo ammettere che andiamo sul complicato, infatti non sono bravo con questi, ho visto qualche post sul web ma ce ne sono troppi da creare per avere un bel risultato, inoltre non ho ben capito dove inserirli.
D'altronde anni fa ho scelto WS proprio perchè si realizzava un sito senza codici o almeno con pochissimi e semplici.
Ti ringrazio, ma penso che lascio tutto così com'è
Author
Ad esempio un codice come questo (trovato sul web) dove deve essere inserito?
<div class="video"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Pytj9s_-rjM" frameborder="0"></iframe>
dovrebbe servire per ottenere l'effetto responsive
Per rendere i contenuti incorporati, responsive, è necessario aggiungere un <div> che racchiuda l'iframe. Come appena scritto nel codice qui sopra. Il passaggio successivo è quello di formattare, con i CSS, sia il <div>esterno che l'iframe.
.video{ position: relative; padding-top:30px; padding-bottom:56.25%; height:0; overflow:hidden; }
anche questo non so dove inserirlo, e infine anche quest'altro per completare il lavoro, ma anche questo dove va?
.video iframe{ position:absolute; top:0; left: 0; width:100%; height:100%; }
Il risultato che vorrei è questo sarebbe bello che facesse tutto WS!!
... sì, ...si potrebbe fare, ...come del resto già fatto in modo simile da me in altri esperimenti, ...ma! ...bisognerebbe considerare le relazioni con il resto dei contenuti della pagina... (considera che non ho il programma!)...
http://www.kolasim-zone.it/tubular/yt_ratiok.html
http://www.kolasim-zone.it/tubular/yt_ratio_css_k2.html ... ecc. ... .. . . (Ctrl+U per vedere il codice sorgente)
... ora come ora, per quella che è la tua pagina adesso, prova questa stringa di codice in /HEAD:
<style> #imPageRowGraphicsVideo_3 { z-index:10 } </style>
... dovrebbe portarti il video in primo piano, attivando il controllo stop/play ...
... prova, dovrebbe funzionarti anche in Anteprima...
.
... per le bande nere puoi provare la mia invenzione; ...sempre per quella che è la situazione attuale; se incolli questo codice in /HEAD, potresti provarlo anche in Anteprima:
<style> #imPageRowGraphicsVideo_3 { z-index:10 } </style>
<script>function h_iframeK(){
var ww =16; // larghezza del video IFRAME;
var hh =9; // altezza del video IFRAME;
var wdiviframe = document.getElementById('imPageRow_3').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('imPageRow_3').style.height=hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
... per i video YT li preferirei tramite Tubular...
.
Author
Devo dire che con i due codici che mi hai inserito ho risolto in modo veramente pulito e bello, proprio quello che volevo.
Ma vorrei capire quel pezzo di codice dove si inserisce l'ID YT quando eventualmente si utilizza.
Author
Per capirci questo:
src="http://www.youtube.com/embed/Pytj9s_-rjM" frameborder="0"></iframe>
... cosi:
<iframe ID="PIPPO" src="http://www.youtube.com/embed/Pytj9s_-rjM" frameborder="0"></iframe>
... mancando gli attributi L/A nelle scheda CSS dovresti aggiungere:
#PIPPO{ width:800px; height:400px}
... oppure
#PIPPO{position:absolute; width:100%; height:100%}
.
Author
Ok, ma vorrei sapere a cosa serve questa stringa, se ho risolto già con i due codici tuoi, ovvero:
<script>function h_iframeK(){
var ww =16; // larghezza del video IFRAME;
var hh =9; // altezza del video IFRAME;
var wdiviframe = document.getElementById('imPageRow_3').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('imPageRow_3').style.height=hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
... al primo (●) ... è il doppione del secondo, ...porta il livello del video sopra agli altri oggetti, che diventeranno non più visibili (e pertanto se ne può fare a meno di metterli)...
... al secondo (●) ... la prima riga <style> è quella appena detta prima, che io ti ho raggruppato in unico codice...
- la seconda riga <script> crea una funzione JS...
- la terza e quarta riga sono i valori A/L del video; ...io ho usato i valori primi del rapporto 16:9...
- la quinta riga calcola il valore della larghezza della riga di sfondo...
- sesta riga calcola l'altezza che prende il video proporzionalmente alla larghezza della riga nella finestra, arrotondando al valore intero...
- la settima riga assegna l'altezza alla riga che fa da contenitore...
- l'ottava e nona riga attivano la funzione all'apertura ed al ridimensionamento della pagina...
... questo permette di non vedere le bande nere, ed essendo gli enti con posizione relativa tra loro, il resto della pagina scrollerà di conseguenza...
.
Author
Ok, adesso comincio a vedere un po di luce, tutto sommato non è neanche difficile a capire, certo spiegato da te e quasi impossibile non capire.
Nel contempo sto cercando di capire come funziona Tubular, faccio qualche prova a parte, effettivamente mi sembra molto "friendly" ci provo.
Grazie per il tuo aiuto!
... ho rivisto il sito ... OK ...
... ciao
... la prima riga <style> la puoi eliminare, essendo un doppione della successiva ...
Author
Ciao KolAsim, scusami se riprendo il discorso, ma mi sono accorto che se elimino la prima stringa di codice cioè quella che porta in primo piano il video e copre gli altri oggetti, volendo provare a visualizzare un oggetto testo sopra al video, sparisce la possibilità di bloccare il video, mentre se la lascio si riattiva.
Secondo te come dovrei fare per mantenere la possibilità di bloccare il video visualizzando l'oggetto testo sul video stesso.
...temo che , KolAsim, ti avesse già risposto nel primo post...
" sopra al video di sfondo hai altri oggetti...?...... se sì, allora non puoi usare controlli video..."
Ciao, sì, come detto da Claudio,
...!... però, se non ti desse fastidio, e poi non starebbe neanche male, anzi, ...potresti attivare la barra dei controllo modificando nella strina URL YT il valore controls, così:
controls=1
... si vedrebbe così:
https://www.youtube.com/embed/TfcvCihF9PE?autoplay=1&loop=1&controls=1&disablekb=1&fs=0&showinfo=0&rel=0&playlist=TfcvCihF9PE
.
bye
.