Prevent iframe playing youtube video

Question

Is there an option in iframe to prevent it from playing video i.e. I have following iframe:

<iframe src="https://www.youtube.com/embed/v2ifWcnQs6M" width="468" height="60" ></iframe>

I want to display just the thumbnail of youtube video with red 'play' button in the center of thumbnail, but disallow user to actually play video. Is there a way to do it ?

Because as I checked Youtube IFrame API there is no solution for getting youtube video id i.e. I have to parse url by myself and then construct the following url:

https://img.youtube.com/vi/video_id/0.jpg

And besides this url returns thumbnail without red 'play' button which I also want. So is there an HTML attribute in iframe or js workaround to do it ?

Gmur

Answer 1

Add a transparent div on top of the YouTube video with CSS. See example.

Loudmouth

thanks, nice workaround! is there an option to make play button always active i.e. red ? – Gmur

you're welcome. unfortunately there is no way of customizing the button using the youtube api but you can put your own custom red button over the iframe just like we did for the transparent div. – Loudmouth

Answer 2

No. No such attribute. If you dont want to allow users play that video, you need to construct block manually. Get the thumbnail and create or cut play button image. Then within CSS write layout rules and show to user this constructed block

Reboant

thank you for the answer. shame that youtube don't support getting video ids internally :( Seems that I will use 'img.youtube.com/vi/video_id/0.jpg' – Gmur