jwPlayer causes rendering not to load in Sitecore's Page Editor

I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.

The part of the rendering that deals with the video is as follows:

@if (Model.VideoLink != null && Model.Image != null)
{
    var vidid = Guid.NewGuid().ToString();
    <div class="article-video-module">
        <p class="video-placeholder-text">@Html.Raw(Model.Heading)</p>
        <div id="@vidid">Loading the player...</div>
        <script type="text/javascript">
            jwplayer("@vidid").setup({
                file: "@Model.VideoLink.Url",
                image: "@Model.Image.Src",
                width: "100%",
                aspectratio: "16:9",
                sharing: {
                    link: "@Model.VideoLink.Url"
                },
                primary: 'flash'
            });
            jwplayer('videodiv-@vidid').onPlay(function () {
                $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
            });
            jwplayer('videodiv-@vidid').onPause(function () {
                $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
            });
        </script>
    </div>

    @Editable(a => Model.Description)
}

Other things that might help:

• When I comment out everything in the <script> tag above the rendering shows up perfectly.
• A reference to jwplayer.js is found on the page (that was my first thought)

Console errors in Javascript:

• No suitable players found and fallback enabled on jwplayer.js
• Uncaught TypeError: undefined is not a function on jwplayer("@vidid").setup({ and on jwplayer('videodiv-@vidid').onPlay(function () { from above.

How can I get jwPlayer and Page Editor to work nicely with each other?

The issue is that when you add a component through Page Editor, the script is fired before the div <div id="@vidid"> element is added to DOM. Don't ask me why...

The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:

<script type="text/javascript">
    if (document.getElementById("@vidid")) {
        jwplayer("@vidid").setup({
            file: "@Model.VideoLink.Url",
            image: "@Model.Image.Src",
            width: "100%",
            aspectratio: "16:9",
            sharing: {
                link: "@Model.VideoLink.Url"
            },
            primary: 'flash'
        });
        jwplayer('videodiv-@vidid').onPlay(function () {
            $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
        });
        jwplayer('videodiv-@vidid').onPause(function () {
            $(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
        });
    }
</script>

There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:

var vidid = "jwp-" + Guid.NewGuid().ToString();