jQuery Wrap IFrame (in Div) Examples

While working with iframe (or with any other element), it might sometimes be desirable to have a complete control over it, such as it’s spacing, padding, alignment, etc. For the same reason, it can be very helpful to wrap the iframe (or the desired element) in a div, so that appropriate CSS styles can be applied to the div. In this article, I am going to share a very easy way to wrap iframe in div using jQuery. You can use this to wrap video iframe or any other dynamically created elements in a div. Read on to find out more.

Wrap IFrame in Div using jQuery

Let’s discuss how to wrap an element using a div in general first, so that you can use this technique and apply it to any element of your choice. So let’s say we have an element and we want to wrap it in a div. We can do it like so:

Example 1: Wrap an element using Div (in its most basic form)

$(element).wrap("<div class='my_div'/>");

Example 2: Wrap an iframe using Div

$("iframe").wrap("<div class='my_div'/>");

Example 3: Wrap an object using Div

$("object").wrap("<div class='my_div'/>");

Example 4: Wrap a Div using Div (Using the ID of the div to be wrapped)

$("#my_first_div").wrap("<div class='my_div'/>");

Example 5: Wrap a Div using Div (Using the class of the div to be wrapped)

$(".my_second_div").wrap("<div class='my_div'/>");

Example 6: Wrap a Table using Div

$("table").wrap("<div class='my_div'/>");

Example 7: Wrap a Div using Div and then wrap the resultant div with another div

$("#video").wrap("<div class='video_container'/>");

$(".video_container").wrap("<div class='my_div'/>");

Simple, isn’t it?

Do you know of any other ways to wrap iframe in div using jQuery? Feel free to suggest by commenting below.