How to Embed an iFrame in WordPress (Responsive YouTube Embeds)

How to Embed an iFrame in WordPress (Responsive YouTube Embeds)


– Today we’re gonna show you how to embed an iFrame into your WordPress blog. This is great for including
content from other websites or even YouTube videos. Now, before we begin, we
will note that not every site is able to be embedded
because of security protocols that some sites have. But we’ll be showing you how to do it with and without a plugin. So let’s hop right in. So here we’re on a WordPress dashboard, we’re gonna add a new post. Now, before we start, I just wanna note that if you’re just trying
to include YouTube video in your site, you can just paste the link in the WordPress editor, and it will automatically embed it for you if you’re using one of the newer versions that came out in the last couple of years. That’s probably the best way to include a video from YouTube, but if you’re trying to
specifically include an iFrame, here’s how you do it. So in our example post
here, make sure to add HTML. We’re gonna just go in the
editor here and type in HTML. Now the HTMl for an
iFrame goes as follows, iFrame, src equals and we’ll do bing.com. And that’s it. Now we’re gonna preview
the doc and you can see that we have bing.com here. Granted it’s a bit small
here but that’s how you embed an iFrame. Now, if you’re not
comfortable with doing HTML, now we’re gonna show you how to do it using a plugin and a short code. So we’re just gonna go over
here and download a new plugin. And the one we’re gonna
be using is called iFrame and it’s over here by webvitaly. So now we’ve activated the plugin. Now, here’s the example short
code they give you here. We’ll be copying them, and we’ll go back to our post. And we’ll be removing our current HTML and adding some text here. And let’s preview it. Now you can see here
that it’s not showing up and that’s because our site has HTTPS. Make sure that all your
embeds have HTTPS set, otherwise they won’t
display in most browsers. And there you go, there’s the embed. Now, if you notice it’s
square, which is a bit odd, and it’s not responsive. Now, if you wanna make your
YouTube embeds responsive, here’s how you do that. First of all, we’re
gonna switch over to HTML and we’re gonna wrap our iFrame tag. This will also work with
the HTML tag or short code, so either way that you’re doing it, you’ll need to add this new tag in, div class equals
responsive-embed-container. Now this class actually
does nothing right now but we’re gonna show you how
to add HTML into your site that’ll make the embed
responsive using those code. And then we’re end the
div head tag over here. You can see here that
the embed is incorrect because we have a widescreen video here. So we’re gonna go on the Customize and your WordPress site should let you add additional CSS here, if it doesn’t, you can
find plenty of plugins that let you add CSS. Now we’re gonna go over to our blog post which has the code examples
that we’re using in this video. And we’re gonna add the CSS here for the responsive-embed-container. And now you can see it’s
the proper aspect ratio and as we scroll down, and go to mobile phone size,
it’ll be the same aspect ratio in all browsers. And that div tag will work
great on all of your videos. So if you’re trying to
make a responsive container for your YouTube videos,
that CSS will work for you. And that’s it, you’ve included
an iFrame on your site and as you’ve seen it’s really
easy and it’s a simple way to include YouTube videos in your site or any kind of content. Now, if you have any questions
or hung up on anything, let us know on the comments
and we’ll be responding. And for all the code examples
and the full tutorial, check out the link in our description and that includes the links
to plugins used as well. And for more WordPress tutorials, be sure to subscribe and check
out our website, smartwp.com. Thanks for watching.


11 thoughts on “How to Embed an iFrame in WordPress (Responsive YouTube Embeds)

  1. wow with your video you gave me the idea of how to insert an iframe in my wordpress with elementor … it's with the html plugin, thanks friend.

  2. Hi,
    I used iframe in ot of previous wordpress blogs in the last years. Now I tried it again and I have some troubles with it. I put in the iframe code like you did then I switched the editor from HTML to normal and I see the embeded frame, but after puplishing the iframe disapears… What is my mistake? I use the free subscription, so I can't use the plugin option… Please help me. Many thanks and kind regards Maurice

  3. Nice. Precisely what I wanted. Especially when I noticed your website. I didn't even have to retype the CSS. Great work.

  4. YouTube oembeds show up perfectly in my dashboard version and the "preview" but the videos are all missing when viewed on a browser. What gives?

  5. So I was able to go thru the post and I see the website I am embedding but confused over what to do after I post. I want to have this website added in a specific place in my main website. I did not see instructions on how to move this "post" around in the website.

Leave a Reply

Your email address will not be published. Required fields are marked *