Come inserire un video e sotto un testo nello stesso div

**podset** · 21-08-2019, 11.39.45

Nel pezzo di codice che tra poco inserirò qui sotto devo mettere un video e un testo all'interno
di uno stesso <div>. Si tratta di un <div class= ecc ecc.

Il problema però è che il video appare nello stesso punto del testo coprendo il testo stesso.
Io vorrei invece che apparisse il video sopra e il testo subito sotto al video. Come si può fare per fare in modo che appaia in questo modo?

Devo mettere queste due componenti nello stesso div perché se per esempio non voglio mettere il video (che nel codice sta sopra al testo), poi dopo non rimanga lo spazio vuoto sopra il testo per la mancanza del video. In pratica vorrei che il testo scalasse sopra al posto del video.
(spero di essermi spiegato chiaramente).

Ho provato a togliere la classe al <div> del video, cioè <div class="video"> e ho lasciato semplicemente la dicitura <div> e in quel modo funziona, però c'è il difetto che il video non è più responsive e quando restringo la schermata la metà del video non si vede, quindi non posso farlo.

Qualcuno potrebbe postarmi il codice che mi faccia apparire il video sopra e il testo sotto che però quando non voglio inserire il video non rimanga lo spazio vuoto ma il testo passi al posto del video?

Ecco qui il codice sul quale lavorare:

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Left column */
.leftcolumn {
float: left;
width: 65%;
}

.card {
padding: 20px;
margin-top: 20px;
}

.video {
position: relative;
padding-top:30px;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
        
.video iframe {
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
}

.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>

<body>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>&nbsp;</h2>
<div class="video"><iframe src="http://www.miosito.mp4" width="440" height="260" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<main>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</main></div>
<h3>&nbsp;</h3>
</div>
</div>
</body>
</html>

**alemoppo** · 21-08-2019, 12.31.56

Non ho guardato il codice né letto bene il tutto, ma hai provato con z-index?

Se non riesci, puoi indicare una pagina di esempio dove c'è quel codice?

Ciao!

**podset** · 21-08-2019, 15.43.21

L'esempio che mi hai mandato è basato su un'immagine, ma il mio problema è con un video. Ricorda che il testo deve stare sotto e distaccato dal video e non in posizione sovrapposta come è nell'esempio al quale mi hai rimandato. Comunque ho creato una pagina apposta per la discussione e la puoi trovare qui....

**alemoppo** · 21-08-2019, 21.21.54

Prova attribuendo a "main" un posizionamento assoluto.

Ciao!

**podset** · 22-08-2019, 11.20.42

Dove dovrei attribuirlo? Nel css o nel body? E poi basta solo quello?
Ho già provato a mettere una posizione absolute ma nei css del video, ma non ha dato grandi risultati. Tu invece dici di farlo nel <main> ma i css del main non ci sono come puoi vedere...

**alemoppo** · 22-08-2019, 11.39.02

Originalmente inviato da podset

Tu invece dici di farlo nel <main> ma i css del main non ci sono come puoi vedere...

Beh? Puoi sempre impostarli: https://www.alemoppo.altervista.org/...esto_su_video/

Ciao!

**podset** · 22-08-2019, 11.51.42

Ho visto la pagina che mi hai inviato e forse non mi sono spiegato bene in fase di spiegazione. Il testo non deve apparire dentro al video, ma sotto al video. Si può fare oppure è impossibile perché sono due elementi nello stesso div?

**alemoppo** · 22-08-2019, 12.10.42

Allora ho capito male.
Se vuoi far apparire la scritta sotto il video, puoi semplicemente rimuovere il posizionamento assoluto (oppure, posizionare il testo in modalità assoluta però con traslandolo verso il basso con top).

https://www.alemoppo.altervista.org/...tto_video.html

Se poi lo vuoi responsive, puoi usare le media queries per ridimensionare gli elementi.

Ciao!

**podset** · 22-08-2019, 16.57.06

Ho seguito le tue istruzioni per quanto riguarda la prima parte e ho provato tutte e due le possibilità.
Eliminando la posizione assoluta il testo viene sotto come voglio io, però quando restringo il browser il video si spezza e viene fuori solo un pezzettino dimezzato.

Poi giocando un po' con i pixel del parametro top del video che si trova nei css il testo viene sopra, ma poi facendo il restringimento del browser succede la stessa cosa che ho descritto sopra.

Facciamo una cosa: siccome quello che ho postato finora è solo una parte della pagina web (quella interessata dal problema), forse è meglio se ti faccio vedere la pagina nella sua interezza con tutto il codice completo.
Ti metto solo il link di indirizzo senza postarlo nella discussione perché vorrei rimuoverlo successivamente, in quanto non voglio che rimanga pubblico. OK?

Questo è il link della pagina con il codice all'origine, cioè senza le modifiche che mi hai detto di apportare, così ti rendi conto meglio di dove sta il problema e magari puoi suggerirmi delle varianti che prima non avendo a disposizione tutto il codice non potevi capire. Ho inserito anche un video cortometraggio scaricato dal web perché è brutto presentare un link con miosito.mp4 come ho fatto prima.

Quindi, la pagina in questione puoi trovarla qui...

**programmazioned** · 22-08-2019, 19.22.41

Se il contenuto che vuoi inserire è un semplice mp4, prova il tag video con:

Codice:

video {

   width:100%;
   height:auto;

   /* eventuale massimale per la larghezza
   * max-width: 250px; 
   */

}

senza il div contenitore.

Se proprio ti serve un iframe (Youtube?) che io sappia non c'è modo con quel markup (se non, come diceva Alemoppo, forzando il main sotto al video), perché il posizionamento assoluto necessario per simulare la responsiveness distacca l'iframe dal flusso normale della pagina.

Non mi è chiaro però questo:

Devo mettere queste due componenti nello stesso div perché se per esempio non voglio mettere il video (che nel codice sta sopra al testo), poi dopo non rimanga lo spazio vuoto sopra il testo per la mancanza del video. In pratica vorrei che il testo scalasse sopra al posto del video.

Perché non puoi spostare il main fuori, dopo il div, per poi rimuovere completamente il div (e non solo l'iframe) quando necessario?

Ciao!

P.S: ho visto dei float nel CSS. Potrebbe interessarti Flexbox.

**podset** · 23-08-2019, 15.22.09

Rispondo al quesito di programmazioned: la pagina a cui si accede dal link di sopra l'ho fatta con un programmino in php che consiste nel compilare una serie di campi box che corrispondono alle varie aree della pagina. Compilando i campi box e cliccando su "crea pagina" viene fuori la pagina già fatta.

Per questo, se creo una pagina in cui c'è il video e il testo allora va tutto bene, perché ognuno compare nel proprio posto all'interno della pagina. Ma se io voglio fare una pagina in cui non è previsto il video perché non lo voglio mettere per mia scelta, ma voglio inserire solo il testo, allora vorrei che il testo si collocasse al posto dove doveva stare il video (se lo avessi messo) e non che rimanga lo spazio vuoto xche non ho messo il video. Capisci? Questo è uno dei due problemi che sto cercando di risolvere.

problema 1: il testo che viene coperto dietro al video
problema 2: lo spazio vuoto che rimane se il video non viene inserito nella pagina

Non so se mi sono spiegato bene, comunque ora provo il tuo suggerimento e vedo se funziona...

P.S: il flex box a cosa dovrebbe servirmi?

**podset** · 23-08-2019, 17.24.42

Ho seguito il tuo suggerimento e mi è venuto fuori una cosa così

Non so se ho fatto come dici tu e per questo ti ho messo il link alla pagina. Puoi controllare?
Comunque in quel modo risolve il problema del far apparire il testo sotto al video e il problema dello spazio vuoto. Ho fatto la prova e il testo prende il posto del video eliminando lo spazio vuoto, ma rimane il problema di adattare il video alla risoluzione dello schermo (il responsive).

Come posso fare?

**programmazioned** · 23-08-2019, 17.57.26

Hai messo il CSS, ma manca l'HTML (v. pagina che avevo linkato)!
Intendevo così:

Codice HTML:

<div class="card">
	<h2>&nbsp;</h2>
	<video controls>
		<source src="http://testiefficaci.altervista.org/video/River_-_14205.mp4" type="video/mp4">
	</video>
	<main>
		Panties that make me feel hot (Aerie thong panty try on
		Vintage Fully Fashioned Stockings Review - Cassie
		PORQUE & COMO EU PAREI DE USAR CELULAR
		Woodstock 1969
	</main>
	<h3>&nbsp;</h3>
</div>

Ciao!

**podset** · 24-08-2019, 15.14.38

Ho fatto una prova col tuo html e funziona tutto tranne che mi scombussola tutto il template,
ovvero la colonna di destra non appare più a destra ma si posiziona a sinistra sotto il video.
Si posiziona in questo modo...

Quindi non va bene. Come si fa per far rimanere la colonna nella sua posizione?
Devo ridurre la larghezza del video o devo ridurre la percentuale sotto il 65%?
Oppure devo fare in altro modo?
Ho provato anche a ridurre la larghezza massima del video, ma la colonna rimane dov'è.

P.S: magari non devo eliminare il div. Che ne dici?

**programmazioned** · 24-08-2019, 17.19.30

Hai spostato rightcolumn fuori da row, oppure aggiunto qualche </div> per sbaglio... ricontrolla aperture e chiusure dei tag e dovrebbe andare.

Ciao!

**podset** · 25-08-2019, 17.15.54

Per quanto riguarda il rightcolumn fuori dal row avevi ragione e ora è tornato a destra, però ora c'è ancora uno dei due problemi che avevo fin dall'inizio, cioè che quando tolgo il video rimane lo spazio vuoto prima del testo e ora non rimane del tutto vuoto ma c'è l'iframe del video con il play e il cursore, cosa che non ci dovrebbe essere visto che il video l'ho tolto.

Guarda qui nella pagina...

**programmazioned** · 25-08-2019, 18.18.48

La cosa migliore da fare sarebbe sicuramente modificare lo script PHP per non stampare l'HTML se non è valorizzato il campo relativo al video... ma se proprio non ne hai la possibilità, puoi nascondere il tag video quando è vuoto:

Codice:

video:empty {

  display: none;

}

Ciao!

**podset** · 26-08-2019, 11.58.13

Ok!!!

**programmazioned** · 26-08-2019, 15.47.22

... prego!

Discussione: Come inserire un video e sotto un testo nello stesso div

LinkBack

Strumenti discussione

Display

Come inserire un video e sotto un testo nello stesso div

Tags for this Thread

Regole di scrittura