I designed a WordPress wordpress plugin that produces a shortcode that returns this string:

<span class="video-link-box">
    <a class="video-link" href="http://www.youtube.com/watch?v={$videoid}">{$content}</a>
    <div class="video-box video-box-hidden">
        <a class="video-box-exit" href="javascript:void(0)"></a>
        <iframe width="{$width}" height="{$height}" src="http://www.youtube.com/embed/{$videoid}?enablejsapi=1" allowfullscreen></iframe>
        <aside>{$caption}</aside>
    </div>
</span>

However, below is when Google chrome states it's being made. This labored before I managed to get right into a WordPress wordpress plugin (static HTML, JS, and CSS). WordPress causes my JavaScript and stylesheets to partly fail. What's happening and just how can one prevent this?

Screenshot of Google Chrome

EDIT: WordPress is intrusively adding p tags still. The above mentioned screenshot no more reflects the way the XHTML has been made but how do i prevent WordPress from carrying this out?

A <span> tag can't ever have a <div>. Since the <span> is definitely an inline element employed for formatting within blocks like <div> or <p> tags. Inline elements can't ever contain block elements and Chrome is attempting to normalize the invalid markup you gave it.

To resolve the problem you need to result in the video-link-box a div. Maybe you have to apply some additional formatting.

You are able to switch off the Wordpress auto-formatting, using wpautop (or better by crippling that filter). There's additionally a wordpress plugin to show from the auto-formatting on the per-publish basis.

Ah, and that i didn't remember that WordPress does not use HTML5 too. Appears like I'll have to change <aside>

No, you don't have to, latest versions of Wordpress know about the HTML5-tags. But as pointed out within the other answer, the wpautop-function also inspections for correct block-element-nesting.