What i'm trying to do is have youtube videos show a div when they stop playing. Wordpress replaces youtube links automatically with embed code. Instead I'd like to replace it with something like:

function custom_ytube_embed ($content) {
    if (strstr($content,'http://www.youtube.com/embed/')) // see if any youtube embeds available
        $pattern = "/version=3&rel=1&(.*?)&wmode=transparent'/s"; //param pattern
        $count = preg_match_all($pattern, $content, $matches); //find pattern and count matches

        foreach ($matches[0] as $match) {
        // replace matched params with new params

            if (is_single()) { //autoplay only on single pages
            $new_param = "autoplay=1&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&wmode=transparent' id='vidID" . $count . "'";
        else { //all other pages no auto play
            $new_param = "autoplay=0&enablejsapi=1&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&wmode=transparent' id='vidID" . $count . "'";

        //replace params iframe with new params
        $content = str_replace($match, $new_param, $content);
    return $content; 
    else {
        return $content; // if not found return it anyway

function div_wrapper($content) {
    // match any iframes
    $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
    preg_match_all($pattern, $content, $matches);

    foreach ($matches[0] as $match) {
        // wrap matched iframe with div
        $wrappedframe = '<div class="video-container">' . $match . '</div>';

        //replace original iframe with new in content
        $content = str_replace($match, $wrappedframe, $content);

    return $content;    

add_filter('the_content', 'custom_ytube_embed');
add_filter('the_content', 'div_wrapper');

This way i could rely on the youtube api to make the player and i can call a funtion when the player is done playing. Also I need to pull the video id from the post as well. At first I tried remove_filter from the_content of the wpembed all together and then using add_filter to the_content to strip the original post of the youtube link and replace it but that isn't ideal if someone was to post something besides a youtube video and my results didn't go as well as I expected. I know my approach probably isn't ideal as I don't have much experience with wordpress. Any help is gladly appreciated.

  • This sounds like something that should be done in JS. I assume you can get the player div/iframe via the API otherwise it just will not work when you have several videos on the same page. – Mark Kaplun Dec 20 '13 at 11:34
  • To manipulate a player embedded in an iframe according to the api the iframe needs to be assigned an id and i need to add enablejsapi=1 to the src so I still need to manipulate what wordpress spits outs for its auto embed at some point. After that I should be able to interact with the player through JS. maybe assign a listener for when the onStateChange event and then show my div? – user44176 Dec 20 '13 at 21:10
  • ok, I think it should be relatively simple to use the_content and some regexp to attach id and enablejsapi to the youtube frame/div. If it doesn't work then it is time for you to show your code. – Mark Kaplun Dec 20 '13 at 21:26
  • ok after thinking about what you said i came up with 2 functions. One to replace the params in the youtube url and another to wrap the iframe in a div so i could give it an id so multiple videos could work on the same page. the increment in the loop isn't working and the regexp is a bit crude but it does work to replace the strings as intended. Now would you recommend that I add the JS to the_conent? I edited the code above – user44176 Dec 21 '13 at 7:35
  • JS best served at the footer unless the api requires it to be served before the video, so just use the script enqueue functions to serve it at the best place. if you have two videos you probably don't want to serve the JS twice. – Mark Kaplun Dec 21 '13 at 7:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.