Skip to main content
C
conzolom58623008
Known Participant
May 30, 2018
Answered

Embed a project so it plays, interactive, on a website

  • May 30, 2018
  • 11 replies
  • 1277 views

Hello,

I understand that I might be using the term "embed" wrong, but what I mean is I want the interactive project to play on a website without launching in a new tab or window. I know that I need to host the project on a server. Assuming I do that (so I have a link to the project) how do I embed it? I'm new to all of this, so I'm not sure where to get started.  I see things like "iFrame" come up when searching online, but is that an old way of doing this or would that still work? And related, do you recommend a site for this, like Wordpress... Sqaurespace? Would it work on Google Sites?

I have searched the forums and the only post I found close to this wasn't really answered.

Thanks,

Conzolo

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Correct answer Erik Lord

    Ideally, if you have a webhots like BlueHost, you also have FTP access to your website.

    It would likely be far easier to upload your published CP folder to your site via FTP than trying to do it through the WP admin area.

    Of course, then you have to understand and use FTP...but if you're wanting to understand how the web works (HTML, iframes, hosting, etc.) that's a pretty important piece to know anyway.

    So upload your published CP folder to your website (likely in the 'public_html' folder) via FTP.

    Understand how to then access it via your domain name (i.e. https://www.mysite.com/published-folder/index.html)

    [that is, of course, just an example URL]

    Then figure out how to generate an iframe on a page using WP...and point the source ('src') of that iframe to the URL that loads your CP project.

    Easy Peasy

    11 replies

    Lilybiri
    Lilybiri
    Legend
    May 30, 2018

    Have a look at this blog post on my site:

    Force First View (micro-navigation) - Captivate blog

    It is just an example of an embedded interactive movie. I published that movie to my domain, and embedded the URL in an iFrame with the proper settings for size. The interactive movie was published as rescalable HTML, can also be watched using a direct link, and will rescale to the screen resoljution=. Here is another example, this time not embedded:

    Captivate's Timeline

    C
    conzolom58623008Author
    Known Participant
    May 30, 2018

    Yes, that first example is what I want to do. I don't know how to code, but I'm guessing I can figure out how to use the iFrame. It needs to be scaleable for different size computers, but it doesn't need to work on smartphones.

    Thanks for your help!

    Lilybiri
    Lilybiri
    Legend
    May 30, 2018

    I am not using WordPress, have tried it out and did read a lot of complaints on this forum that it is difficult to embed a published CP-project. Sorry, cannot help with WP.

    Erik Lord
    Erik Lord
    Inspiring
    May 30, 2018

    When you publish a Captivate project as HTML5-only you'll end up with a folder that contains a few subfolders and files.

    One of those files will be 'index.html'.

    Upload that entire folder to your website, navigate to the URL + folder + index.html

    like: https://www.mysite.com/published-folder/index.html

    There! Your project shows up 'embedded' in that HTML document.

    However, if you're looking to embed that index.html > CP project piece into another webpage (i.e. WordPress) then, yes, the iframe method is likely to be most manageable for you. As you have, you can read up on iframes everywhere...the overall idea being you create a defined 'frame' within the parent webpage that loads in another HTML document (i.e. your CP index.html).

    There are downsides, however.

    -iframes aren't very 'accessible', meaning they're not very friendly to those with disabilities (i.e. text to speech software can have trouble reading the text within).

    -iframes don't scale well to various screensizes - so what may look good on a desktop will likely not look good on a mobile device.

    There are ways to compensate for those issues, it just takes reading and understanding of how to code those items...and perhaps they're not significant concerns for your delivery.

    How you host depends on your needs. If you want a large, custom, lots-of-content site with various CP projects scattered and embedded within, something like WordPress should work well (I've not used Square, Wix, or Google Sites).

    However if you don't need a large site and aren't delivering for cross-device, accessibility, etc, it may be better if you don't use software like that and just do it the old-fashioned way and hand-code your sites (or use Dreamweaver, etc). Of course, that takes a lot more learning...

      C
      conzolom58623008Author
      Known Participant
      May 30, 2018

      Ok, great. Thanks for the help!

      One question on your explanation. Assume I use Wordpress - you mean upload to my server, right? And then I link using the example you gave and it point to that, right? From what I understand I can't upload to the webpage... the project needs to "live" somewhere else (I think bluehost would be an example of where I could store it, no?).

      Right now I'm still learning all of this so there's a great chance I'm missing the basic way this all works. I think what I did the other day was create a wordpress site and used my personal computer as the server, with the understanding that if I were to publish this I'd have to host it somewhere. So maybe that's what you mean? The same place I host the wordpress site I would upload the project.

      Thank you for your time!

      Erik Lord
      Erik LordCorrect answer
      Inspiring
      May 31, 2018

      Ideally, if you have a webhots like BlueHost, you also have FTP access to your website.

      It would likely be far easier to upload your published CP folder to your site via FTP than trying to do it through the WP admin area.

      Of course, then you have to understand and use FTP...but if you're wanting to understand how the web works (HTML, iframes, hosting, etc.) that's a pretty important piece to know anyway.

      So upload your published CP folder to your website (likely in the 'public_html' folder) via FTP.

      Understand how to then access it via your domain name (i.e. https://www.mysite.com/published-folder/index.html)

      [that is, of course, just an example URL]

      Then figure out how to generate an iframe on a page using WP...and point the source ('src') of that iframe to the URL that loads your CP project.

      Easy Peasy

        Firefly Community Gallery
        Adobe Firefly

        Remix with Firefly Community Gallery

        Thousands of free creations to fall in love with and remix in Firefly.

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