У меня есть Youtube встраивается в resizable div, который работает нормально, но очень сложно изменить размер. Это похоже на то, что браузер пытается справиться с изменением размера iframe одновременно с контейнером - и он зависает/трясет (особенно когда я пытаюсь сделать контейнер меньше).
Здесь мой код
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/AVqsLU3LQyE" frameborder="0" allowfullscreen></iframe>
</div>
а также...
$("div.video-container").resizable();
а также...
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
border:1px solid #000;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
И вот скрипка: http://jsfiddle.net/JLTVS/
Любые идеи, как я могу сделать изменение размера немного более плавным?
То, что вам нужно, это элемент, который будет сидеть поверх iframe и содержать контекст мыши "local" вместо "remote" (также в iframe).
Это может быть выполнено с помощью div с более высоким z-индексом при изменении размера. Посмотрите скрипку и посмотрите html/css/js для
#mask