Vimeo timestamp not working for embedded videos

  • jlhenkle

    (@jlhenkle)


    2 years ago

    We have added timestamps to the urls of our Vimeo embedded videos, but the videos are still starting at the beginning when played on our WP site, not at the timestamp. When the Vimeo url is pasted into a browser, however, it starts at the timestamp.

    If you hover over the embedded video in the link above, you will see the “#t=637” at the end of the url, which is the timestamp. I have tried adding “s” and “m” for second and minute markers and various other timestamp formats. All yield the same result of not working on WP.

    The embedded video is currently placed via text mode in the classic editor. I have also tried using the Vimeo block in the Gutenberg editor. I have tried embedding the url on other WP sites as well, so it’s not a conflict with Divi or any of our plugins. Any ideas or suggestions?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Took me a bit of sleuthing, but this workaround should work, no plugin needed (tested).

    1) Grab the iframe “embed” code from the video.

    <iframe title="vimeo-player" src="https://player.vimeo.com/video/768688920?h=3e3f80f90c" width="640" height="360" frameborder="0" allowfullscreen></iframe>

    2) Add the timestamp to the video URL. Here I’m adding 600s (ie #t=600s):

    <iframe title="vimeo-player" src="https://player.vimeo.com/video/768688920?h=3e3f80f90c#t=600s" width="640" height="360" frameborder="0" allowfullscreen></iframe>

    3) Now in the block editor (aka Gutenberg), place this in a CUSTOM HTML block. If you use the EMBED block or simply paste the code in the text block, WordPress will automatically convert it to show a preview… but the timestamp won’t work.

    Test your video. The timestamp should work now.

    But you may realize that the video is not responsive (I got different results with different themes, so do test this).

    If you find your video is NOT responsive, remove the CUSTOM HTML block entirely, then:

    1) First add a ROW block. You may want to center the row block.

    2) Then add a CUSTOM HTML block inside the row block.

    3) Finally, put the iframe code inside the CUSTOM HTML block which is inside the ROW block.

    Here’s a demo (temp link active for 24 hours only):

    https://oon-family-ciye.instawp.link/vimeo-vith-timestamp/

    The page has the same video embedded twice, and both of them should have been timestamped to start at 600s (note the blue marker on the players).

    The first video was placed in a CUSTOM HTML block in a ROW block and centered. It’s responsive.

    The second video was placed in a CUSTOM HTML block directly. It is not responsive.

    In case the link goes dead before you read this, I’m adding a screenshot here. Sorry, my phone is in dark mode, but I hope you’ll get the gist of it.

    The blue markers on the videos show the timestamped point where the video starts when you hit the play button. And as you can see, the video on top was resized to fit the mobile screen (ie responsive), whereas the video below was not resized.

    I hope that helps ??

    Good luck!

    (And, yes, I get up at 4AM to answer WordPress questions ?? )

    Thread Starter jlhenkle

    (@jlhenkle)

    @gappiah Thank you for such a thorough response! We’re using Divi’s builder for most of our pages, but your fix worked perfectly with the Divi CODE block—and it’s responsive and everything. Many thanks! This was driving me crazy, and I’m thrilled to have a solution. Cheers!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Vimeo timestamp not working for embedded videos’ is closed to new replies.