Embedded Youtube Video Cue Points

[njtweb]

I'm not sure if this would be the right place, if not please move. Thank you.

Is there a way to have links in a topic body play in the same embedded youtube video in that topic? I normally post a full game in a box score topic. You can watch the game in it's entirety right there in the post. But all of the links for the goals, (when clicked) open to the youtube page and play there. It would be great if it's possible to click the links and not leave my website, instead stay there and play the goals in the same embedded video.

Example:

Link 1 with cue point URL in youtube video &t=650

Link 2 with cue point URL in youtube video &t=949

Link 3 with cue point URL in youtube video &t=1346



[Embedded Video Here] <--- You can either click play and watch the entire game, or click the links above it in the post to go right to the goals.

[vii]

Yes: https://stackoverflow.com/a/26257588

And this is an example: http://jsfiddle.net/tfa7v3dy/7/

I'm not sure if your YT plugin gives the iframe an id, so you may need to mod it. You'll probably also need to tweak that example javascript code a bit so you can embed the script on each thread page, and then you can use your Admin status to insert html directly into the post, allowing you to easily do links like this:

<a href="javascript:seek(30);">Seek 30 seconds in</a>

I would say use the [url][/url] bbcode, but it automatically prepends http:// to it, rendering it non-functional.

[njtweb]

Yes: https://stackoverflow.com/a/26257588

And this is an example: http://jsfiddle.net/tfa7v3dy/7/

I'm not sure if your YT plugin gives the iframe an id, so you may need to mod it. You'll probably also need to tweak that example javascript code a bit so you can embed the script on each thread page, and then you can use your Admin status to insert html directly into the post, allowing you to easily do links like this:

<a href="javascript:seek(30);">Seek 30 seconds in</a>

I would say use the [url][/url] bbcode, but it automatically prepends http:// to it, rendering it non-functional.

I used to use Ohara but had formatting issues in conjunction with using the tinyportal plugin. I uninstalled that and changed to using simple audio video embedder. I looked through those two links you posted and none of it makes sense.

[vbgamer45]

Check out
https://www.quora.com/How-do-I-add-a-link-to-jump-to-a-specific-time-of-an-embedded-Youtube-video

[njtweb]

Thank you, but after careful consideration I've decided that's not going to work for me. Instead I'd like to change it up a bit.

I still want the video to play in the page, (not leave my site). Is there a way to make the links play the youtube video in a high slide type format when clicked? Click the link and the video player pops up with dark background? Or is that exclusively for sites who upload their own video to their site and use their own video player?

Thank you I appreciate the replies.

[Aleksi "Lex" Kilpinen]

Theoretically that might be possible, but generally Youtube does it's best to force everyone to use their own player.

[Arantor]

It is possible to create something that uses the YT player code and navigates to the right points in time but it's not a small amount of work at all, unfortunately. I remember spending an afternoon just to integrate the YT player code to bring up a video in a Bootstrap model and have it pause when the model was closed.

Making it as a bbcode will be really tough too.

[njtweb]

Ok, understood. Thanks for the replies.

[vii]

njtweb: It's very doable with the video mod you said you were using. I just took a look at it. You would just have to tweak the simple audio embed mod to add an id="" parameter to the youtube embed code, as well as adding "&enablejsapi=1" to the end of the url, and adding the YouTube script API file link as well.

For instance, I whipped this up on a test page, and it skips ahead in video I embedded when you click the button:

Code Select Expand


    <script src="http://www.youtube.com/player_api"></script>
    <iframe id="player" width="700" height="400" type="text/html" src="https://www.youtube.com/embed/ZPfNgIj2eNU?v=ZPfNgIj2eNU&list=RDZPfNgIj2eNU&t=2m3s&loop=0&enablejsapi=1" frameborder="0" mozallowfullscreen="" allowfullscreen="" webkitallowfullscreen=""></iframe>

    <script>
        var player, seconds = 0;
        function onYouTubeIframeAPIReady() {
            console.log("player");
            player = new YT.Player('player', {
                events: {}
              });
        }

        function seek(sec){
            if(player){
                seconds += sec;
                player.seekTo(seconds, true);
            }
        }
    </script>
    <br /><br />
    <button onclick="seek(1330)">Click me to skip 22:10m into the video</button>


I'd put together a quick thing for you but I'm really busy at the moment and what you're trying to do involves just enough small but tedious changes that it would take a little bit to get right. Maybe at the end of the month I can revisit this.

[njtweb]

That sounds like what I'm looking for @Virginiaz.

I think I'm going to pass on the last project we discussed. The amount of traffic I was expecting once the season started hasn't really developed. I get more traffic based on topic discussion than I do the travel maps.

With that being said, I'd be interested in working with you for the youtube functionality instead. Please send me a PM when you know you think you'll have availability and we can discuss $$.

Thanks!

[njtweb]

Thanks @virginaz again, great work as usual. I strongly recommend for any customization work.