▼
Streaming live at 10am (PST)

I want a video to start playing after a click interaction

Design help Animations & Interactions
#1

Hi,

here : http://midnight-romeo.webflow.com/

You can see i have a play image in the middle of my screen. When i click on it, it make my video appear.

I would like the video to start playing at that moment so my user don`t have to press play twice!

Thank you,
Jon

#2

Try adding the following parameter after your video url:

autoplay=1

This should then look like this:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

(of course change url and width / height)

Maybe you have to reembed your video, so that the url changes … since you did not provide a public url I cant see clearly enough how the video is embedded into the iframe.

Here is another helpful url
https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds

Cheers
Daniel

1 Like
#3

Nice, now it starts when my page load and not when my play logo as been clicked!

Here in preview mode : https://preview.webflow.com/preview/midnight-romeo?preview=768c8d023bd3084121effc45ac83ce82

Thanks!

#4

Is that sarcasm ? :smile: :slight_smile:

Then there is only a Javascript solution, that will help you in this situation.

Try to paste this code into your “custom code - footer area”:

<script>
   $('img').click(function(){
        video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
        $(this).replaceWith(video);
    });
</script>

Then make a screenshot of your starting thumbnail, load that into a webspace or dropbox and paste this embed-code element onto your page (Where your current video is loaded):

The imv-src should be replaced by your handmade thumbnail!!!

<img src="http://www.gravatar.com/avatar/48231943117b8e0d0db0abdcb57a9032?s=32&d=identicon&r=PG" data-video="https://www.youtube.com/embed/2wqMnD94Y0Eautoplay=1">

When you now click on that image, it should start the video.

If there is a coder out there, that can change that to a normal hyperlink solution - that would be awesome.
Because I can’t guarantee that this will mess up your other img tags on your site…

As you can see, its … working … in a way …
http://videotesting.webflow.com
https://preview.webflow.com/preview/videotesting?preview=7cdabfaeb17f08b1337150cc15635638

#5