Embeding several YouTube videos using Iframe API WordPress

• SOLVED

I am creating a Wordpress site that will require several embedded YouTube videos to play within a div once it is clicked.

So for example, on my homepage I have 5-10 blog posts, some of them will be normal posts, but some of them will be videos using post formats.

I will be creating a custom field where you can enter in the YouTube video ID, this will be attached to the play icon on the front end.

The posts that are video posts will have the featured image displayed as the thumbnail and also a play icon. Clicking on the play icon will replace the image & icon and play the video. Once the video finished playing, the featured image and play icon will re-appear.

Also, only one video should be able to play at once.

I am building a responsive website, so the width of the video should span the full width of the column it is on.

I have created this http://jsfiddle.net/6hbPK/ although it may not be much help at this point.

Answers (2)

2012-11-17

Francisco Javier Carazo Gil answers:

Maybe a plugin?
http://wordpress.org/extend/plugins/youtube-with-style/
http://tubepress.org/download/

---

Anthony Moore comments:

Thank you for your suggestion, however, I am not looking for a plugin solution at this time.

---

Francisco Javier Carazo Gil comments:

You can add to your functions.php of your theme something like this: Add a filter which to your content the YouTube iframe player, whose video id would be get from meta data.

This should be something like this:
function my_the_content_filter($content) {
$video_id = get_video_from_meta();
$content .= insert_your_video_here($video_id);
return $content;
}

add_filter( 'the_content', 'my_the_content_filter' );

2012-11-17

Arnav Joy answers:

you can do it using js/ajax .
on click of the thumbnail image we can call a function then using youtube video id , create embed code and replace the thumbnail image with this new embed code .

---

Anthony Moore comments:

That is pretty much what I was thinking.

I am wondering how this will work with the YouTube Iframe API (https://developers.google.com/youtube/iframe_api_reference)

I think utilizing the API will give us greater control over the video. That is just my speculation.