CODEWITHSUNDEEP
javascriptjqueryjquery-uiiframeembed
Tom
Tom

Reputation: 12998

Embedded Youtube video in jQuery UI resizable container

I have a Youtube embed within a resizable div which works OK, but is very difficult to resize. It's as if the browser is struggling to deal with resizing the iframe at the same time as the container - and it freezes/jolts (especially when I try to make the container smaller).

Here's my code

<div class="video-container">
    <iframe width="560" height="315" src="//www.youtube.com/embed/AVqsLU3LQyE" frameborder="0" allowfullscreen></iframe>
</div>

and...

$("div.video-container").resizable();

and...

.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%;
}

And here's a fiddle: http://jsfiddle.net/JLTVS/

Any ideas how I can make the resizing a bit smoother?

Upvotes: 0

Views: 987

Answers (1)

Matt Stevens
Matt Stevens

Reputation: 4676

What you need is an element that will sit on top of the iframe and keep the mouse context 'local' instead of 'remote' (aka in the iframe).

This can be accomplished with a div with a higher z-index while the resizing is happening. See the fiddle and check out the html/css/js for

#mask

http://jsfiddle.net/JLTVS/2/

Upvotes: 1

Related Questions