Can you hide YouTube embed controls without enabling autoplay?

Question

<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen> 

Should you uninstall? autoplay = 1, the video does not work. It looks like you cannot use the control option without starting automatically.

Not sure why this is not mentioned in the YouTube embed entry.

I hope I'm wrong.

https://developers.google.com/youtube/player_parameters#controls

Answer 1

Set auto play = 0

 <iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen> 

As shown here: Autoplay = 0 Test

Answer 2

To continue using YouTube iframe, you only need to change ?autoplay=1 to ?autoplay=0 .

Another way to achieve this would be to use the YouTube JavaScript Player API. ( https://developers.google.com/youtube/js_api_reference )

Edit: The YouTube JavaScript API Player is no longer supported.

 <div id="howToVideo"></div> <script type="application/javascript"> var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = false; ga.src = 'http://www.youtube.com/player_api'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); var done = false; var player; function onYouTubePlayerAPIReady() { player = new YT.Player('howToVideo', { height: '390', width: '640', videoId: 'qUJYqhKZrwA', playerVars: { controls: 0, disablekb: 1 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(evt) { console.log('onPlayerReady', evt); } function onPlayerStateChange(evt) { console.log('onPlayerStateChange', evt); if (evt.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { console.log('stopVideo'); player.stopVideo(); } </script> 

Here is a jsfiddle example for an example: http://jsfiddle.net/fgkrj/

Please note that player controls are disabled in the playerVars section of the player. One sacrifice you make is that users can still pause the video by clicking on it. I would suggest writing a simple javascript function that subscribes to a stop event and calls player.playVideo() .

Answer 3

use autoplay=0

autoplay takes 2 values.

 Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads. 

main part

 autoplay=0&showinfo=0&controls=0 

Here is a demo for ur problem with fiddle

Answer 4

If you add this ?showinfo=0&iv_load_policy=3&controls=0 to the end of your src , it will display everything except the bottom right YouTube logo
working example: http://jsfiddle.net/42gxdf0f/1/

Answer 5

 ?modestbranding=1&autohide=1&showinfo=0&controls=0 autohide=1 

- this is something that I never found ... but that was the key :) I hope this helps

Answer 6

To remove the controls and title tube, you can do something like this

 <iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe> 

exit code

showinfo=0 used to remove the header, and &controls=0 used to remove controls such as volume , play , pause , consume .

Answer 7

Follow this https://developers.google.com/youtube/player_parameters for more information on video controls, for example:

 <iframe id="video_iframe" width="660" height="415" src="http://www.youtube.com/v/{{course_url}}?start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0" frameborder="0" allowfullscreen></iframe> 

start = 7 & autoplay = 0 & showinfo = 0 & iv_load_policy = 3 & rel = 0 " frameborder = "0"

all controls are described there

Answer 8

Auto play only works with /v/ instead of /embed/ , so change src to:

src="//www.youtube.com/v/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0"