Skip to main content
F
Fred Schenkelberg
Known Participant
October 24, 2015
Question

html 5 to wordpress without plugin

  • October 24, 2015
  • 1 reply
  • 2031 views

Hi,

A little searching shows a lot of talk about embedding a CP project using a plugin, yet the host I'm on does not let me add plugins (Rainmaker). Thus looking for a way to add html 5 published project on post or page in order to permit the project to be viewed by iOS or other mobile platforms....

any thoughts or ways to make this happen and avoid using swf files?

Cheers,

Fred

This topic has been closed for replies.

1 reply

M
Mr Fossy
Inspiring
October 26, 2015

Hrm … Tricky!

What does the authoring end of your Wordpress setup look like? Just a typical WP dashboard? And is your Captivate project set up to fit the body width of the Wordpress front end?

Depending on your dashboard, there's a Wordpress HTML editor (as opposed to the visual editor), but it isn't great. (In fact, it's set up by default to do funny things to code you write there.) But one thing I'm wondering is if you could embed your Captivate index.html as an iframe within the body. There are plugins for doing this (I know …), but there might be no-plugin solutions too. However, they'd require you to edit some PHP. By default, Wordpress doesn't like the iframe tags.

Without plugins, or without playing with the PHP files, I reckon this might not be possible.

F
Fred SchenkelbergAuthor
Known Participant
October 27, 2015

Yes, that was the clue I needed, iframe with index.html link.

That works. then had an issue with aspect ratio on the dynamic site. So added a bit of css to the site

for the post/page where I insert the CP files add

<div class="aspect-ratio-4x3">

<iframe src="http://--your url to where the index file exists on your server--/index.html"

width="1080" height="810" >

</iframe>

</div>

and, in the custom CSS I added

/* iframe maintain aspect ratio 4x3 (captivate)

--------------------------------------------- */

.aspect-ratio-4x3 {

position:relative;

width:100%;

height:0;

padding-bottom:75%

}

.aspect-ratio-4x3 iframe {

position:absolute;

width:100%;

height:100%;

left:0;

top:0

}

so, for so good, as it appears, has the ability to be controlled, clicks, the quiz works, etc.

Cheers,

Fred

M
Mr Fossy
Inspiring
October 29, 2015

Fantastic! I'm glad it's working out so far. I wasn't expecting it to be that straightforward, actually.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices