Video Gets Hidden Via Javascript But Already Starts To Play (autplay-mode) Even It's Not Visible?

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dom

Solution 1:

You will need to use,

YouTube JavaScript Player API

Alternatively,

Put this as url (autoplay off)

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0" 

And on click of button change src to

http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1"

This wont be as smooth as js api, but will do the trick.

Solution 2:

If you don't want to use youtube API or vimeo API, I'd suggest you have iframe src empty and set it when the loader div is clicked. so

I will use

<iframewidth="420"height="315"src=""frameborder="0"allowfullscreen></iframe>

and

<div class="con loader" data-iframe-src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1">

then in click event of js code, just set the data-iframe-src value to iframe src:

$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));