Come inserire un video e sotto un testo nello stesso div
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> </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> </h3>
</div>
</div>
</body>
</html>
