[Solved] Automatically adding links to files in a folder in JavaScript

by 


<html>
<head>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/myjs.js"></script>
<style>
.ytid{float:left;margin-right:5px;border:1px solid black}
.clear{clear:both;}
</style>
</head>

<body>

<div class="listids">
    <div class="ytid" data-str="p9zdCra9gCE">video 1</div>
    <div class="ytid" data-str="QrMOu4GU3uU">video 2</div>
 </div>


 <div class="clear"></div>
<br>

<div class="vidarea">
            <div class="load_vid"></div>
        <iframe class="vid_src" data-src="" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="width:640px; height:460px;display:none;" allowfullscreen=""></iframe>
            </div>

<br><br><br><br><br><br><br><br><br><br>

<textarea class="embed" data-content="&lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;" onfocus="this.select();" onclick="this.select()">
    &lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;

</textarea>

<script>
    $(document).ready(function(e) {
        $(".vid_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
        var t = "1";
        var n = $(".embed").attr("data-content");
        n = n.replace("[ytvidID]", t);
        $(".embed").html(n);
        $(".listids").slideDown();

        bindEventHandlers();


        $(".embed").keyup(function()
        {
            var valuetoinspect = $(this).val();
            if(valuetoinspect.indexOf(".html") != -1)
            {
                var vidvalue = valuetoinspect.split(".html");
                checkAndMergeVideoListing(vidvalue[0]);
            }
        })
    })

    function checkAndMergeVideoListing(video)
    {
        var count = $(".ytid").length;

        if( $(".ytid[data-str=\""+video+"\"]").attr("data-str") == null)
        {
            var $div = $("<div></div>");
            $div.addClass("ytid");
            $div.attr("data-str",video);
            $div.html("video " + (count+1));

            $(".listids").append($div);

            bindEventHandlers();

            $(".ytid[data-str=\""+video+"\"]").click();
        }
    }

    function bindEventHandlers()
    {
        $(".ytid").unbind("click").click(function(e) {
            var t = $(this).attr("data-str");
            var n = "https://www.youtube.com/embed/" + t + "";
            var r = $(".embed").attr("data-content");
            r = r.replace("[ytvidID]", t);
            $(".embed").html(r);
            $(".vid_src").attr("src", n);
            clearInterval(interval);
            document.querySelector(".load_vid").style.display = "none";
            $(".vid_src").show();
            return
        })
    }
</script>

</body>
</html>

Please check here for demo, assuming in the embed textarea you enter something like p9zdCra9gCE.html. It gets added in the video tab [the same starts playing]. Please let me know if i was not able to grasp your requirement. Hope it helps!

solved Automatically adding links to files in a folder in JavaScript