Казалось бы, выход — использовать спрайты, но тут не получится их использовать.
<!-- video -->
<div id="trailer" class="is_overlay">
<video id="video" width="100%" height="auto" preload="auto" autoplay loop>
<source src="/video/smoke.mp4"></source>
<source src="/video/smoke.webm" type="video/webm"></source>
</video>
</div>
<!-- /video -->$(document).ready(function(){
var w = screen.width;
if (w <= '1200') {
$("#trailer").replaceWith("<div class='video_image'></div>");
};
});<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=TL1Ji8PLfzY48FW_T4DsO-Hoel1eWj0T&width=500&height=400&lang=ru_RU&sourceType=constructor&scroll=true"></script>height=auto а родительскому блоку, к котором будет лежать карта уже меняй, как надо.
Пока у меня была идея только с тегом: available main. Есть еще варианты?
<header class="header[available="main"] header--main[/available]">header</header>
<style>
.header { height: 100px; }
.header--main { height: 300px; }
</style>-webkit-overflow-scrolling: touch;