Tag: html

How to insert a responsive iframe into your WordPress post

How to insert a responsive iframe into your WordPress post

Inserting an iframe to your WordPress post can be somewhat troublesome, but still can be done if you know some tricks. In this post, I’m going to show you how to embed a responsive iframe that can work with your responsive WordPress website beautifully.

To make things more understandable along the post, let’s try to embed the famous slither.io game to our post.

slither.io is a multiplayer game written in HTML5. If you click on their website here, you’ll find out that the game is responsive to most of devices and browsers currently.

Now let’s say we want to put that game into our post as an iframe.

First try

Switch to Text Editor and paste in the iframe linking to the original website.

<iframe src="http://slither.io/"></iframe>

When I switch to Visual Editor, the iframe is there but is very small.

Moreover, the game doesn’t seem to be able to response to the resolution that small and the UI starts to break.

Second try

Switching back to Text Editor, I find out that WordPress has kindly added the width and height for my iframe.

I changed the width and height to 600 and 400 in that order, and the iframe appears better.

<iframe src="http://slither.io/" width="600" height="400"></iframe>

Third try

Now to make the iframe centered in the post, I apply the same trick I used to insert and center a YouTube video in WordPress in a previous post, which adds an extra wrapping div as below.

<div style="text-align: center;">
    <iframe src="http://slither.io/" width="600" height="400"></iframe>
</div>

Everything works perfectly until now.

However, this set-up does not response well every screen resolution. I want it to always takes 100% the width of the parent container. The problem with this is while I can set the width to 100%, I can’t specify the appropriate height of the iframe.

  • If I set the height to a percentage like 50%, I can’t tell the height of the game when it appears, it can be half the screen or it can be larger than the screen, or it can be 0, depending on the parent container.
  • If I set the height to a fixed height like 400px, the iframe won’t response well on some devices, especially mobile devices when the user experience on the portrait mode and landscape mode differ a lot.

The working solution

After some research, I came across this article and ended up with the solution below.

<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        src="http://slither.io/" width="100%" height="100%" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

What this code does is that it set the div’s width to 100%, and then make the div’s resolution to always be 16:9 ratio by setting

padding-bottom: 56.25%;

Setting the wrapping div’s position to be relative and the iframe’s position to be absolute also plays an important role here.

Now the div always responses to the parent container and always keeps the resolution ratio at 16:9.

You can change the ratio by changing the "padding-bottom: 56.25%" to the ratio you want (notice that 56.25/100 == 9/16).

If you want to make your code more beautiful, you can add a custom CSS to your site (by altering the theme’s code files or adding a custom Text Widget) as following

.responsiveWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.responsiveWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And then, just add your iframe like this

<div class="responsiveWrapper">
    <iframe src="http://slither.io/" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

It should work now:

 

Side note. The iframe does not appear on my website because of the mixed content policy, where my website uses https but the iframe source only supports http. Other than that, everything should work fine.

That’s it. Does this solution work for you? Do you have any tips on this? Let me know in the comment! 😀

How to insert and center a YouTube video in WordPress

How to insert and center a YouTube video in WordPress

Introduction

With these tips, you can insert and centre a YouTube video in your responsive WordPress website to fit all the devices flawlessly.

In our editing life, there are times when we have to insert an iframe into our WordPress posts, where the most common case is inserting an embedded YouTube video.

For example, I want to embed this video in my post

https://www.youtube.com/watch?v=6FTUpceqWnc

On the YouTube page of that video, I click on Share button and then click to Embed tab. YouTube provides me with the following html code to put on my website

<iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Now it’s time to embed this iframe to my post.

First try

If I post the whole code to the Visual Editor, nothing happens and the raw code just appears there.

And when I switch to the Text Editor, I immediately know why: the html tags I pasted in have all been decoded.

Second try

Yeah you’ve got it! Of course I switch to the Text Editor and paste the code.

However, this video is placed on the left, while I expect it to be placed in the center.

So, I try to select the video and click on the Align Center button but it doesn’t work.

The working solution

Again, I switch to Text Editor, put in an wrapping div like below

<div style="text-align:center">
    <iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

What this code does is that it put a div that spans 100% across the width of the post, and then the code:

style="text-align:center"

makes the iframe stay in the center of the div, which also means the center of the post (because the div spans 100% across the width of the post).

Now the video goes in the center of the post, just as I want.

Now the video is aligned in the center of the post.

Do you have any tips on this? Share with us in the comment! 😀