Автоматическое масштабирование видео и изображения в ячейке таблицы или в div

/* "*" - означает применние стиля для всех блоков на странице  */
* {
    margin: 0px;
    padding: 0px;
}
 
/*описание общих свойств оформления для тела документа*/
body {
    background-image: url(../images/body/oceanCar.jpg);
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: repeat; /*повторить фоновое изображение по оси х*/
    /*Название шрифтов, которые будут по очереди подставляться, если какого-то нет в системе
    serif - шрифт с засечками.
    */
    font-family: Arbat, Adventure, Tahoma, Verdana, Arial, Helvetica, serif;
}
 
 
/*центрирование элемента, где находится заголовок документа*/
#divHeaderIndex {
    margin: 0, auto;
    border: 0px solid red;
    background-image: url(../images/header/header.jpg);
    position: fixed; /*   Фиксированное положение */
    height: 20px; /*Устанавливает высоту блочных или заменяемых элементов*/
    left: 0; /*Для позиционированного элемента определяет расстояние 
        от левого края родительского элемента, не включая отступ, 
        поле и ширину рамки, до левого края дочернего элемент*/
    top: 0; /* Левый верхний угол */
    padding: 5px; /*Устанавливает значение полей вокруг содержимого элемента.*/
    clear: both; /*Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.*/
    width: 100%; /* Ширина слоя */
}
 
/*таблица для заголовка страницы*/
#tableHeaderIndex {
    border: 0px solid blue;
    margin: 0, auto;
    width: 100%;
}
 
/*оформление ячейки и ее содержимого внутри таблицы в заголовке страницы*/
#menuHeaderIndex {
    border: 0px solid white;
    text-align: center;
    vertical-align: central;
    width: 100%;
}
 
/*a - это тег в html документе, который определяет ссылку
:link - псевдокласс, отлавливает не посещенную ссылку
добавим цвет для такой ссылки
32CD32 - LimeGreen
*/
a:link {
    color: #9400D3;
}
 
/*:hover - псевдокласс, ловит состояние, когда на ссылку навели курсор мышки.
text-decoration - 
-   подчеркивание, 
-   перечеркивание, 
-   линию сверху, а также 
-   отменять такие эффекты, если какой-либо тег имеет их по умолчанию
 Значение "none" отменяет все эффекты, обычно используется для отмены подчеркивания ссылок.
 color - укажем цвет ссылки, DeepPink
 */
a:hover {
    text-decoration: none;
    color: red;
}
 
/* div для центральной (информационной) части таблицы*/
#info {
    border: 0px solid red;
    width: 100%;
}
 
/*таблица в информационной части*/
#tableInfo {
    padding-top: 21%; /*отсуп верхнего края таблицы от внутренней границы div - info*/
    border: 0px solid blue;
    width: 100%;
}
 
/*ячейка в информационной части для ввода логина*/
#cellTableInfoLogin {
    text-align: right;
    border: 0px solid white;
    padding-right: 10px;
}
 
/*текст в поле для ввода логина*/
#cellTableInfoLoginText {
     padding-left: 10px;
    font-family: Flower;
    font-size: 20px;
}
 
/*ячейка в информационной части для ввода пароля*/
#cellTableInfoPass {
    text-align: left;
    border: 0px solid white;
    padding-left: 10px;
}
 
/*текст в поле для ввода пароля*/
#cellTableInfoPassText {
    padding-left: 10px;
    font-family: Flower;
    font-size: 20px;
}
 
#forgotPassword a{         
    border:0px solid white;   
    color:white;
    padding-left: 30px; 
}
 
/* Описывает нижнюю часть страницы*/
#footer {
    position: fixed; /* Фиксированное положение */
    height: 20px;
    left: 0;
    bottom: 0; /* Левый нижний угол */
    padding: 5px; /* Поля вокруг текста */
    clear: both; /*Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.*/
    /*padding-top: 20px;*/
    background-image: url(../images/footer/footer.jpg);
    background-repeat: repeat-x;
    border-top: 4px solid #A6640E;
    width: 100%; /* Ширина слоя */
}
 
/*ссылка на англоязычную страницу*/
#eng{
    border: 0px solid white;
    padding-right: 20px;
    font-family: Cambria;
    font-weight: bold;
}
    #footer p {
        text-align: center;
        margin: 0;
        font-size: 15px;
        color: #0033CC;
    }
 
    #footer a {
        text-align: center;
        font-weight: bold;
    }

<div class="foo"></div>

display:block;max-width:100%;heigth:auto;

.relation{
    position: relative;
}
 
.widthMax {
    max-width: 500px;
}
.relation__ratio{
    padding-top:56.25%; /* пропорция 16:9 (рассчет: 100/16*9) */
    height: 0;
}
 
.relation__content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
}