Я хочу иметь два столбца (50%, 50%) и помещать видео (iframe Youtube)
Я не знаю, как это сделать правильно и реагировать
HTML5 & CSS3: https://codepen.io/jansanchezk/pen/wXwNZE
<!DOCTYPE html>
<html lang="es-EN">
<head>
<meta charset="UTF-8">
<title>***</title>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<meta name="keywords" content="a">
<meta name="description" content="">
<meta name="author" content="">
<meta name="owner" content="">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/Helvetica.css">
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<header>
<h1>
<a href="index.htm">
<figure><img src="fotos/logo.png" alt=""></figure>
<p class="eslogan">The value of experience</p>
</a>
</h1>
<!-- Navigation menu -->
<nav id="ioMenu">
<figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="ico/menu.svg"></figure>
<!-- Menu that will show li items -->
<div id="card_menu">
<figure id="hideMenu" class="ioMenuMovil"><img src="ico/exit.svg" onClick="displayMenu()"></figure>
<figure id="logo_menu"><img src="ico/camera.svg" alt=""></figure>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="servicios.htm">Servicios</a></li>
<li><a href="trabajos.htm">Trabajos</a></li>
<li><a href="nosotros.htm">Nosotros</a></li>
<li><a href="contacto.htm">Contacto</a></li>
<li><a href="clientes.htm">Clientes</a></li>
</ul>
</div>
</nav>
</header>
<div class="row">
<div class="column primary">
<figure>
<iframe src="https://www.youtube.com/embed/YaPV_j8SKso" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/kL0QaSfnLTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/blRou_7PMCE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/rryHUAhLHzg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/YGGH3MrkuTs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/9amG0XelQD0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/QxlCDnvF8u0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote></blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/LfDSBDaQ85U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Mercedes AMG E 43</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/XiXLPJQZ4y8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Mazda</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/qkG9DmwYM6s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>BNP</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/KHExxf6PBnc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Mercedes</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/XFB6Fa2F5ow" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Port Aventura 2016</blockquote>
</figure>
</div>
<div class="column secondary">
<figure>
<iframe src="https://www.youtube.com/embed/-RGWtHqdcyo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Ford Kuga</blockquote>
</figure>
<figure>
<iframe src="https://player.vimeo.com/video/185719682" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<blockquote>Whilliam Hill</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/4BFY0G8sJ-Y" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Samsung Gear S3</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/cq96162AB40" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Porsche</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/iLHIJ00Fh20" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Lexus IS 2017</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/Mfah1RcaIsY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Vimal</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/d2fVh8cH4Kc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Mercedes AMG E 63S</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/ip3KuKkPLj8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Renault Capture</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/CBMNa55rmTk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Caixa de Catalunya</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/YgHyqJjvr44" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Fiat</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/f0B5N6l91ek" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Banco de Sabadell</blockquote>
</figure>
<figure>
<iframe src="https://www.youtube.com/embed/6O5gN4XqKFI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<blockquote>Mercedes V8 Expertise</blockquote>
</figure>
</div>
</div>
<script>
function displayMenu() {
var display;
var card_menu = document.getElementById("card_menu");
display = card_menu.style.display;
if (display == "none") {
card_menu.style.display = "block"
} else {
card_menu.style.display = "none";
}
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117952001-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-117952001-1');
</script>
</body>
</html>
Мне нужно, чтобы это видео было в группах по две рядом друг с другом.Если места недостаточно, видео должно быть размещено внизу.Как я могу сделать это в CSS3?