Jump to content

Youtube Embed Video In Wrong Place


fife

Recommended Posts

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 by fife
Link to comment
Share on other sites

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;
   });
});

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.