Search code examples
htmlvimeovimeo-playerembedded-video

add an option to change embedded vimeo video through links on my page

This is a screenshot of what I have

enter image description here

now under Gigi and Bob I have 5 song links. I would like to link these directly to the vimeo player in my page so that when for example a user clicks on the "Silence" song link under Gigi the video will go to this song.

The current html for the song list under Gig is

<ul>
    <li><a href="#">L'Amour</a></li>
    <li><a href="#">Bla Bla Bla</a></li>
    <li><a href="#">The Riddle</a></li>
    <li><a href="#">Another Way</a></li>
    <li><a href="#">Silence</a></li>
</ul>

and for the vimeo video it is

<section id="player">
    <iframe src="https://player.vimeo.com/video/105778399" width="200" height="150" frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>
Solution

  • If you simply want to play a video you have the embed url for then you can target your links to the iframe. You just need a name attribute on your iframe and target attribute on the links:

    demo

    <a href="https://player.vimeo.com/video/45196609?autoplay=1" target="VimeoPlayer">L'Amour</a>

<section id="player">
    <iframe src="https://player.vimeo.com/video/105778399" name="VimeoPlayer" width="200" height="150" frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

    If you want something more complicated there's an API that allows you to integrate the Vimeo player into your website using JavaScript: https://github.com/vimeo/player.js