Embedding autoplay Youtube Video, Remove related videos, make video responsive
Recently we made a new video for our business and wanted to embed it with autoplay, remove related videos after play, then most of all to make the video responsive across all mobile platforms. Lets start with the following.
1. Remove suggested videos from youtube when the video finishes;
See a typical embed code below
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/AMUzoBIyyzw" frameborder="0" allowfullscreen></iframe>
The above video will show the video , and suggest videos when it finishes playing , but the following l embed will not;
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/AMUzoBIyyzw?rel=0" frameborder="0" allowfullscreen></iframe>
Note the addition of the highlighted ?rel=0
Actually this could be achieved before embedding by clicking on 'show more' options under the embed code in your youtube video and then unselect the show 'suggested videos when the video finishes'. The embed code will be adjusted as above.
2. Add autoplay to video when it loads and remove suggested videos;
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/AMUzoBIyyzw?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Note the addition of &autoplay=1
3. Make the video responsive;
Actually you can do this by going to http://embedresponsively.com/ and entering your video url. Copy the embed code and afterwards make the adjustments to the code to look like the following as highlighted here below
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube-nocookie.com/embed/AMUzoBIyyzw?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe></div>
Goodluck !