WordPress modifies my DOM structure?

I made a WordPress plugin that creates 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>开发者_Python百科
</span>

However, below is how Google chrome says it is being rendered. This worked before I made it into a WordPress plugin (static HTML, JS, and CSS). WordPress causes my JavaScript and stylesheets to partially fail. What is happening and how can I prevent this?

EDIT: WordPress is intrusively adding p tags still. The above screenshot no longer reflects how the XHTML is being rendered but how can I prevent WordPress from doing this?

A <span> tag can never contain a <div>. Because the <span> is an inline element used for formatting inside of blocks like <div> or <p> tags. Inline elements can never contain block elements and Chrome is trying to normalize the invalid markup you gave it.

To solve the issue you should make the video-link-box a div. Maybe you need to apply some additional formatting.

You can turn off the Wordpress auto-formatting, using wpautop (or better by disabling that filter). There is also a plugin to turn off the auto-formatting on a per-post basis.

Ah, and I forgot that WordPress doesn't use HTML5 too. Looks like I'll need to change <aside>

No, you don't need to, latest versions of Wordpress know about the HTML5-tags. But as mentioned in the other answer, the wpautop-function also checks for correct block-element-nesting.