WordPress.org

Ready to get started?Download WordPress

Forums

Embedding an html5 banner (3 posts)

  1. tastyjams
    Member
    Posted 2 years ago #

    Greetings WordPress Support Gurus -

    I created a banner as a swf then converted it to html5 using Google Swiffy (http://steveibsen.com/playground-banner-test.html) - I'm trying to embed as the banner of my wordpress page but having trouble getting it to work.

    Is there a source code or plugin for embedding html5 objects? Thank you in advance for any help you can provide!

  2. christianstockart
    Member
    Posted 2 years ago #

    I know it's been a while since you posted this, but I did manage to get my converted from SWF to HTML5 banner into my wordpress site. I was using the Standard Theme so this solution may not work for you, but at least it is a place to start. I searched for days and could not find this solution. Finally I had to just start experimenting, and this is what worked for me.

    The Swiffy extension for Adobe Flash Pro exports a lengthy HTML5 file. You will need to copy everything in this file from:

    <script src="http://www.gstatic.com/swiffy/v4.0/runtime.js"></script>

    to...

    <script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
    stage.start();
    </script>

    And then paste it twice. Completely replacing the following two lines of code on the standardtheme.php file near the beginning of the section that renders the Standard Theme header. (You will have to find the php file and section that renders the header for your theme.)

    <img class="title" src="<?php echo $standard_options->logo; ?>" alt="<?php bloginfo('name'); ?>" />

    and...

    <img class="title" src="<?php echo $standard_options->logo; ?>" alt="<?php bloginfo('name'); ?>" />

    VERY IMPORTANT: Swiffy already assumes that the HTML5 element is stand alone and removes the scroll bars. There is an "overflow: hidden" written into each of the HTML5 elements at the very end of the code:

    <body style="margin: 0; overflow: hidden;">

    I changed it to "overflow: scroll" and solved the issue.

    NOTE: As with any tinkering with the yourtheme.php files, save a working copy as backup. Something that you can FTP to the site just in case you break something with this solution.

    Let me know if you find this solution useful!

  3. christianstockart
    Member
    Posted 2 years ago #


Topic Closed

This topic has been closed to new replies.

About this Topic