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>
</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?
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.
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.