Skip to content

Instantly share code, notes, and snippets.

@markmhendrickson

markmhendrickson/stylebee-pro-help-center-embed-template.html

Last active November 26, 2017 17:21
Show Gist options
  • Save markmhendrickson/59b7d173ee1ac9fbf47ffe963e4740f6 to your computer and use it in GitHub Desktop.
Save markmhendrickson/59b7d173ee1ac9fbf47ffe963e4740f6 to your computer and use it in GitHub Desktop.
Download ZIP
STYLEBEE pro help center video embed template
Raw
stylebee-pro-help-center-embed-template.html
<div class="video">
<div>
<iframe src="https://www.youtube.com/embed/S7RNb7KCUgU?rel=0&amp;modestbranding=1&amp;autoplay=1&amp;showinfo=0&amp;fs=1&amp;color=white" frameborder="0" allowfullscreen="allowfullscreen"></iframe
</div>
</div>
@markmhendrickson
Copy link
Author

markmhendrickson commented Nov 26, 2017 •
edited

To use this template, simply copy and paste the above code and replace the video's ID (e.g. S7RNb7KCUgU here) with the ID of the video you want to embed.

The embed's parameters are designed to:

  • Minimize the amount of YouTube branding shown
  • Autoplay the video on page load
  • Hide overlay info upon playback that would otherwise distract
  • Allow fullscreen viewing if desired by user


  • Use white instead of red for the playback progress bar color
  • Prevent recommended videos from displaying at the end of playback, distracting the pro from the step of proceeding to the next article.

This is how it'd look if recommendations were left on and the above HTML were not used to ensure proper aspect ratio scaling:

screen shot 2017-11-26 at 17 47 34

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment