Youtube Embed Video In Wrong Place

[fife]

I have this code

 

 

<script type="text/javascript">

$(document).ready(function() {

// I added the video size here in case you wanted to modify it more easily

var vidWidth = 300; // 425;

var vidHeight = 200; // 344;

var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' + '<param name="movie" value="http://www.youtube.com/v/[vid]&hl=en&fs=1">' + '</param><param name="allowFullScreen" value="true"></param><param ' + 'name="allowscriptaccess" value="always"></param><em' + 'bed src="http://www.youtube.com/v/[vid]&hl=en&fs=1" ' + 'type="application/x-shockwave-flash" allowscriptaccess="always" ' + 'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> ';

 

$('.posthold:contains("youtube.com/watch")').each(function() {

var that = $(this);

var vid = that.html().match(/v=([\w\-]+)/g); // end up with v=oHg5SJYRHA0

 

that.html(function(i, h) {

return h.replace(/(http:\/\/www.youtube.com\/watch\?v=+\S+\S?)/g, '');

});

 

if (vid.length) {

$.each(vid, function(i) {

that.append(obj.replace(/\[vid\]/g, this.replace('v=', '')));

});

}

});

});

</script>

 

 

It works great at embeding videos from url's. But I have a small problem with it that I have been trying to solve but i keep breaking the code.

Basically I have the following div setup

 

 

<div class="grid_10 alpha omega posthold" >

<div class="clearfix">

<div class="grid_2 alpha">

<img src="/images/no-image/logo_default.jpg" width="100" height="100" />

</a></div>

<div class="grid_8 omega">

<h1>Some Name Here</h1>

<p>Some Comment here</p>

 

</div>

</div>

 

</div>

 

Im trying to get the video to appear directly after the closing paragraph tag where it says some comment here. The user enters the video as part of a post. I store the post in a database and when I pull the post out I swap the url from youtube to the embed code. This is a repeating div so there maybe many instances that a video appears. Is this even possible. At the minute the video appears after the last closing div tag.

Edited November 26, 2012 by fife

[codefossa]

You seem to be making this much more complicated than it needs to be. Here's a little example, and hopefully you get all you need from it. You're already using jQuery, so all it does is uses the iFrame solution of embedding and makes this much simpler.

 

Demo: http://xaotique.no-ip.org/tmp/21/

 

HTML

<center>
   <form method="post" action="#" id="form">
       <span style="font-weight: bold; font-size: 12px;">YouTube URL</span>
       <input type="text" id="url" value="https://www.youtube.com/watch?v=YbpiytTvjw8" />
       <input type="submit" value="Get Video" />
   </form>

   <div id="result" style="margin-top: 5px;"></div>
</center>

 

Javascript / jQuery

$(document).ready(function()
{
   function embed(url)
   {
       var iframe = $(document.createElement("iframe")).attr(
       {
           'width': "560",
           'height': "315",
           'src': url.replace(/\/watch\?v=([^\&]*)(.*)?/, '/embed/$1'),
           'frameborder': "0",
           'allowfullscreen': true
       });

       $("#result").html(iframe);
   }

   $("#form").submit(function(event)
   {
       embed($("#url").val());
       return false;
   });
});