Below are the step by step instructions on how to embed the exploRUG account in WordPress with help of a plugin called "iframe" developed by webvitaly. Or if you are just looking for the HTML code for iframe, then please download the sample page (iFrame.html) from the bottom of this article.
- Login to your WordPress dashboard as Admin
- On the left hand side, you can see "Plugins". When you place the cursor on top of it, you will get further more options. Please choose "Add New" button to download iframe plugin.
- In "Search plugins.." text box, please type "iframe" to search the plugin. Once you see iframe plugin, click on "Install Now".
- Once installation is completed, the button will change to "Activate" button. Please click on Activate button to enable the plugin for your post.
- Now click on "New Post" to add a page to embed exploRUG to your WordPress.
- Click on "Text" to add HTML code for an iframe
- Type in the exact following HTML code to create the iFrame.
<p><div class="responsive-embed-container">[iframe src="https://ruglife.explorug.com/" width="100%" height="100%"]</div></p> - Please make sure to change the src parameter to the one we provided for you. Click on "Preview" button to see exploRUG being embed using an iframe.
- We further need to modify some CSS to make the iframe responsive and edit the plugin to enable full screen feature. In order to change CSS, click on Appearance >Customize
- Click on "Additional CSS" to add new CSS to make iframe responsive.
- Paste the following code in the window and click on the "Publish" button.
.responsive-embed-container {
position:relative;
overflow:hidden;
padding-bottom:56.25%;
height:100vh;
max-width: 100% !important;
}
.responsive-embed-container iframe, .responsive-embed-container object, .responsive-embed-container embed {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}div.responsive-embed-container >iframe{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
display:block;
width:100%;
overflow-x:hidden;
overflow-y:auto;
} - Now we need to edit the plugin "iframe" to enable full screen. For that, click on "Plugins> Plugin Editor"
- From Edit Plugins dashboard, please select "iframe" option and click on "Select" button.
- Scroll down to line 49 and add the tag parameter "allowfullscreen" and click "Update File" button on the bottom
- Now go back to your blog post and check the page. You should have exploRUG embed in your WordPress site.
Comments
0 comments
Please sign in to leave a comment.