Question

I have developed a custom YouTube player. with that player I have implemented a question and answer system which saves data to my database by calling php functions using ajax.

the following is the html code

<div id="player">
</div>

    <div id="commentArea">
    <div class="question ui-corner-all">
        <textarea id="comment" rows="10" cols="50" style="width: 100%"></textarea>
        <div id="btnSave" class="player-button" style="float: right">
            Send</div>
        <div style="clear: both">
        </div>
    </div>
</div>

for this to work I have to reference 3 style sheets and 3 script files. But I want the end user to embed this code easily rather than putting stuff in the header and putting the above html code in the body.

Will it be possible for them to just put an embed code, which will bring the above html and also the references to the js and css files? If so what is the best way to do it?

Thank You for any help in advance

Best Regards,
Amila

Answer 1

You could create a little javascript to fetch the necessary files by adding them to the header. Something along the lines of:

<script type="text/javascript" src="..."></script> <!-- jQuery -->
<script type="text/javascript">
  $(document.head).append('<link rel="stylesheet" type="text/css" href="...">');
</script>
...

Of course, browsers support <style> tags anywhere on the page (so just putting the tags on the page would work), but the HTML4 spec doesn’t allow that.
Also, you may want to not load jQuery again if it is already present, but then you have to delay your code until jQuery is actually loaded. Not sure how to do that – the <script>‘s load event, perhaps?