Search the Community

Не могу сообразить как сделать следующее. Делается в Bootstrap 2.3.2. Имеется картинка монитора, в ней видео(допустим iframe) Есть решения на css-tricks Я пробовал - и получается что либо само видео у меня корректно меняет размер, либо бек. Сейчас сама конструкция выглядит как <div class="video"><iframe width="542" height="305" src="http://www.youtube.com/watch?v=niyFA24H5_E?rel=0&hd=1" frameborder="0" allowfullscreen></iframe></div> .video {width: 542px;padding: 28px 29px 0 54px;height: 485px;float: left;background: url("../images/screen.png") no-repeat 25px 0;} Если добавить враппер под респонсивку такого плана .videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0; }.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; } То возникает проблема с экраном)))) Видео скалится ОК, а картинка режется и падает под видео.... Вобщем, нужно решить задачу: адаптивный бекграунд+видео в отдельно взятом блоке...Если у кого есть рабочий пример - дайте плиз ссылку? Спасибо.