Есть такой HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="http://allfont.net/allfont.css?fonts=b52" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../static/css/style.css">
<script type="text/javascript">
function doSomething()
{ document.getElementById('submit').submit();}
</script>
</head>
<body>
<table width=100% height=100% >
<tbody>
<tr>
<td class="video">
<video height="150" autoplay loop>
<source src="../static/video/{{video}}">
</video>
</td>
</tr>
<tr>
<td class="main">
<form action="/uploader" method="POST" enctype="multipart/form-data" name="submit" id="submit" onubmit="return false;">
<label for="file-upload" class="custom-file-upload">SomeText</label>
<input type="file" name="file" id="file-upload" onchange="return doSomething();">
</form>
</td>
</tr>
<tr>
<td class="photo">
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
td.video {
text-align:center;
vertical-align:top;
height:160;
}
td.main {
text-align:center;
vertical-align:top;
height:25;
}
a {
font-size:30pt;
}
td.photo {
text-align:center;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
font-family: 'B52', arial;
font-size: 30pt;
display: inline-block;
cursor: pointer;
}
img {
height:auto;
width: 100%;
max-width:720px;
}
@font-face {
font-family: "B52";
src: url("../fonts/B52.ttf") format("truetype");
font-style: normal;
}
На страницу с сервера передается рандомное видео (заранее сохраненные файлы). Видео примерно одного размера но всеже отличается. SomeText это чтото вроде кнопки загрузки файла без лишних действий пользователя.
Задача: Видео и SomeText должны занимать 80% от ширины экрана. Посередине.
Что делать с видео - как конвертировать/менять размер без потери качества?
Как задать зависимость занятого пространства SomeText от размера экрана? Есть мнение что классу этого текста задать 100% ширины в ячейке , занимающей 80% от экрана. Но ведь и размер шрифта должен меняться. Как это воплотить в код?
Простой
Средний