Используя bootstrap-video-player(https://github.com/html5-ninja/Bootstrap-vi...r-jQuery-plugin) выводится видео вроде
<div class="videoUiWrapper thumbnail ">
<video width="720" height="480" id="show_video">
<source src="
http://local-wprods.com/uploads/products/-product-71/C1kkZf3sFuS.mp4" type="video/odd">
<source src="http://local-wprods.com/uploads/products/-product-71/C1kkZf3sFuS.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><div class="videoController show_video" style="width: 720px;"><div class="progress progress-striped active" style="cursor:pointer"><div class="bar progressBar" style="width: 0%;"></div><div class="bar bufferBar" style="width: 58.9847%; opacity: 0.5;"></div></div><a href="#" class="playMedia"><i class="icon-play icon-white"></i></a><h6 class="timer">00:00 / 01:27</h6><i class="mute icon-white icon-volume-down"></i><ul class="volumeMedia unstyled"><li class="on"></li><li class="on"></li><li class="on"></li><li></li><li></li><li></li><li></li>& lt;li></li><li></li><li></li><ul></ul></ul><i class="fullscreen icon-fullscreen icon-white"></i></div>
</div>
В данном случае размеры видео заданы из настроек видео 720*480
Но как лучше задать чтобы на разных устройстах максимальная ширина была ограничена и не вылазила по ширине ?
В таких случаям часто для бордюра выводится класс, для которого меняется max-width в стилях, которые различны для разных устройств.
Но как это совместить с шириной видео ?
Спасибо!