How do I use the HTML Extension object at all? And embed iFrames?

sr6068
sr6068 Community Member Posts: 4
in Lectora Online
Hey, I've been looking for hours to see how to do this. I need to embed an iFrame inside my Lectora Online project - like, put an iframe on some of the slide. I figure this is done via the HTML Extension object with the 'other' category, or making it javascript or php and coding it in there, but I actually can't get the HTML Extension object to work at all. Do I have to do something special - like set an action - to make the HTML Extension code run? I even tried just running some php since there's a php.

So I've tried:

1) For php: I set the type as "php script". The help for this says that the code will just be put in a div, great. So I hit edit and typed in to the edit window:

<?php
echo "Hello world!<br>";
?>

And hit "Run" - nothing, just the still image of the HTML extension. Then I thought maybe it was automatically php, so I tried just:
echo "Hello world!<br>";

and hit "Run". Still nothing. How do I get anything to actually happen with this HTML extension object?

2) For iFrame: And then more importantly, since I need an iFrame (which I can build with php or any other language if I can get that to work).

In the help, there's nothing for the "other" type, but there is help for a "custom div" which doesn't exist, so I went with that. I tried just with a youtube video (Yes, I know there is a YouTube object, but my goal is not a YouTube video - but if I can get the iFrame to show a YouTube video, I can get it to show anything else):

okay, I have valid html, but to get it to appear here I've had to mod it to not actually register.

<

 iframe width="420" height= "315"
src= "https://www.youtube.com/watch?v=mGQLXRTl3Z0"

 

</

iframe>

 

Nothing. So in case I need the full html, I tried:

<!DOCTYPE html>

<html>

<body>

<

 iframe width="420" height= "315"
src= "https://www.youtube.com/watch?v=mGQLXRTl3Z0"

</ 

iframe>

</body>

</html>

 

 

Still nothing. Does anyone know how to make the HTML Extension object actually do/show anything?

Thanks.
Flag · Off Topic Like

Comments

  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    There are two ways to add external web content to Lectora. For non-technical authors, there's Web Window. Just insert it, type in the URL, click OK. For more technical people, there's External HTML Object. Just insert it, set it to Custom Div, type in whatever HTML code you want (e.g. the code for iframe).

    I recorded a 2-minute video for you showing both approaches: https://www.youtube.com/watch?v=3nc7FNzpr1w

    As for PHP, you have to use the <? or <?php format and upload the files to a PHP server before you preview. Lectora's preview will not execute PHP for you.

    Also, choosing a YouTube link for experimenting with iframe embeds is a bad decision because YouTube does not allow embedding its videos in this way. It will not work in Lectora, outside Lectora, or anywhere else. You should use the following link format: https://www.youtube.com/embed/3nc7FNzpr1w - note the "embed" part in it.
    Flag · Off Topic Like
  • sr6068
    sr6068 Community Member Posts: 4
    Hi Sergey!

    Thanks so much for the reply and the video. I appreciate it, and the information. It works. Very helpful!

    I'm using Lectora Online, and can't find the Web Window button - I suspect perhaps I don't have it. Where you have that in your video, along with the social and RSS feed - I have none of that. So, a difference in the program, perhaps, but just for your reference in case you answer other newbie questions in the Lectora Online forum. So I'm referring only to the video start at 1min in for the HTML extension - but I don't have "Custom Div" as an object type, so I'm using "Other". (when I click help in Lectora Online, it has documentation on the custom div, but unfortunately Lectora Online doesn't have that, so it's a little disappointing the documentation isn't for "other"...).

    Anyway, I copied yours exactly, except using Other instead of Custom Div, and it worked perfectly. Thanks so much!

    One other thing - do you know how to make this resize with the size of the window? I thought I made a responsive project, but when I preview it and shrink / expand my browser window, nothing changes size - not the slide itself nor the iFrame. It just crops. I can't figure this out. Thanks!
    Flag · Off Topic Like
  • sr6068
    sr6068 Community Member Posts: 4
    Ah, it looks like that template just didn't support being responsive - I found a responsive template. But the iFrame still gets cropped. I wonder if this is an issue of the size and width settings - setting it to a percentage, I have scrollbars, so unless you know a better idea, I'll stick with this. Thanks!
    Flag · Off Topic Like
  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    Right, Web Window is only available in Lectora Desktop, and Custom Div is called "Other" in LO. But it is easily emulated using Ext HTML object and I'm happy to hear you got that working.

    As for responsive iframes, I'm not sure how that can be achieved yet, I might need to play with the RCD features a bit more :)
    Flag · Off Topic Like
  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    Okay, here's the solution. If you use the following code for iframe, it will always fill 100% of the Ext HTML Object. And since that object is responsive, the iframe will be responsive too! Here's a live demo, try resizing your browser to see how the Wikipedia embedded page resizes.

    Demo: https://dl.dropboxusercontent.com/u/11433463/trivantis/RCD iframe demo/index.html

    The code:
    <iframe src=https://wikipedia.org style="width:100%; height:100%"></iframe>
    Flag · Off Topic Like
  • sr6068
    sr6068 Community Member Posts: 4
    Ah, yeah, I was using percentages! I see that it does work with wiki, so I guess it's more a problem with what I'm trying to embed in the iFrame. In that case, since the iFrame works great, I'll figure that out. Thanks so much for all your quick responses!
    Flag · Off Topic Like
  • andyshaw
    andyshaw Community Member Posts: 2
    Does anybody know how to pass a JS variable from within an iframe to Lectora?

    I have been using Captivate files (swf) and a HTML header script to link the JS variable from Captivate to an action group in Lectora for years without problems but I'm trying to use HTML5 now and can't seem to get it to work. The JS is still being fired from the HTML5 content in the iframe, it just isn't being picked up in Lectora.

    I read somewhere that the variable has to be initialised first, so I have tried that. I have also tried calling the Action Group directly from the html5 in the iframe as well, bypassing the header script, but that didn't work either.

    I'm out of ideas now. Any help would be greatly appreciated.

    Thanks,

    Andy

     

     

     
    Flag · Off Topic Like

Categories