Adding videos

YouTube videos

Setting up

  1. In a terminal window, run this site locally via Docker.

  2. Go to the dev folder: cd dev

  3. In another window, navigate into the repository, and run the following command:

    hugo new content content/videos/YOUTUBE_VIDEO_ID.md --kind video 

    YOUTUBE_ID is the id as it appears on a YouTube video in a link (i.e. https://www.youtube.com/watch?v=YOUTUBE_ID). This is necessary for the video to appear correctly on the site.

  4. Navigate to the newly created file at content/videos/YOUTUBE_VIDEO_ID.md in your IDE.

  5. Navigate to http://localhost:1313/community/content/videos/YOUTUBE_VIDEO_ID in your browser to view your edits in real time.

Create an author profile

This step is optional, even though you will be required to define an author in the next following step.

Articles are associated with authors, that are represented in your post by either:

  • Option 1: an author page at content/community/engage/people/your-name.md

    If you are an employee of Blackfire.io, Platform.sh, or Upsun and an author of the post, run the command:

    hugo new content content/community/engage/people/your-name.md --kind author
    1. Navigate to the newly created file at content/community/engage/people/your-name.md in your IDE.
    2. Navigate to http://localhost:1313/community/engage/people/your-name in your browser to view your edits in real time.
    3. Follow the instructions in the resulting file to update your personal information on that author page.
  • Option 2: a GitHub profile at https://github.com/your-name

    If an author page does not exist, Hugo will look for an author page on GitHub that matches a username your-name.

  • Option 3: a hardcoded string of the author’s name

    If neither an author page, nor a GitHub username exists for the post, a raw string like “FirstName LastName” will be accepted.

Posts can be attributed to up to three authors, each of whom can be defined by any of the options described above. This configuration comes in the next step, but will look like this:

content/videos/YOUTUBE_VIDEO_ID.md
---
author:
  - your-name # Author 1: a file at content/community/engage/people/your-name.md
  - collaboratorA # Author 2: links to a GitHub profile at https://github.com/collaboratorA
  - "Sayid Jarrah" # Author 3: does not have an author page or a GitHub profile.
---

Update the front matter

Most of the changes you need to make at this point are to the front matter. The front matter contains variables that help tell Hugo how to display the page you’re adding.

content/videos/YOUTUBE_VIDEO_ID.md
---
#################################
# Don't touch these settings.
date: '{{ .Date }}'
sidebar:
    exclude: true
type: media
#################################
...

---

Follow the instructions below to update the required fields. Do not change values presented above between the ################################# lines as is indicated.

  1. Update the title attribute in the front matter of this file.

    content/community/content/posts/article-title-slug.md
    ---
    title: "Include a short, descriptive title"
    # subtitle: "you can also include a subtitle - definitely use for podcast episode titles"
    ---
  2. (optional) Update the image attibute in the front matter of this file using the same YOUTUBE_ID:

    Below is the default behavior if no image value is defined.

    content/videos/YOUTUBE_VIDEO_ID.md
    ---
    image: https://img.youtube.com/vi/YOUTUBE_ID/hqdefault.jpg
    ---

    Defining the image attribute overrides this behavior.

  3. Update the author attribute array in the front matter of this file. Be sure to first follow the instructions above to define author profiles if needed.

    content/videos/YOUTUBE_VIDEO_ID.md
    ---
    author:
      - your-name # Author 1: a file at content/community/engage/people/your-name.md
      - collaboratorA # Author 2: links to a GitHub profile at https://github.com/collaboratorA
      - "Sayid Jarrah" # Author 3: does not have an author page or a GitHub profile.
    ---
  4. Update the categories attribute array in the front matter of this file. Choose only one of the listed available categories, and comment out the rest.

    content/videos/YOUTUBE_VIDEO_ID.md
    ---
    categories:
      - demos
    #   - livestreams
    #   - podcasts
    #   - talks
    #   - webinars
    ---

Update your content

You will see that the video is embedded on the page automatically.

Replace the dummy content at the bottom of the page with your own. Feel free to use the Text formatting for styling tips and common components.

When you’re finished, push to the repository and open a merge request.

Thanks for contributing!

Series: YouTube playlists

Setting up

  1. In a terminal window, run this site locally via Docker.

  2. Go to the dev folder: cd dev

  3. In another window, navigate into the repository, and run the following command:

    hugo new content content/videos/playlist-name-slug.md --kind video 
  4. Navigate to the newly created file at content/videos/playlist-name-slug.md in your IDE.

  5. Navigate to http://localhost:1313/videos/playlist-name-slug in your browser to view your edits in real time.

Create an author profile

This step is optional, even though you will be required to define an author in the next following step.

Articles are associated with authors, that are represented in your post by either:

  • Option 1: an author page at content/community/engage/people/your-name.md

    If you are an employee of Blackfire.io, Platform.sh, or Upsun and an author of the post, run the command:

    hugo new content content/community/engage/people/your-name.md --kind author
    1. Navigate to the newly created file at content/community/engage/people/your-name.md in your IDE.
    2. Navigate to http://localhost:1313/community/engage/people/your-name in your browser to view your edits in real time.
    3. Follow the instructions in the resulting file to update your personal information on that author page.
  • Option 2: a GitHub profile at https://github.com/your-name

    If an author page does not exist, Hugo will look for an author page on GitHub that matches a username your-name.

  • Option 3: a hardcoded string of the author’s name

    If neither an author page, nor a GitHub username exists for the post, a raw string like “FirstName LastName” will be accepted.

Posts can be attributed to up to three authors, each of whom can be defined by any of the options described above. This configuration comes in the next step, but will look like this:

content/videos/YOUTUBE_VIDEO_ID.md
---
author:
  - your-name # Author 1: a file at content/community/engage/people/your-name.md
  - collaboratorA # Author 2: links to a GitHub profile at https://github.com/collaboratorA
  - "Sayid Jarrah" # Author 3: does not have an author page or a GitHub profile.
---

Update the front matter

Most of the changes you need to make at this point are to the front matter. The front matter contains variables that help tell Hugo how to display the page you’re adding.

content/videos/article-title-slug.md
---
#################################
# Don't touch these settings.
date: '{{ .Date }}'
sidebar:
    exclude: true
type: media
#################################
...

---

Follow the instructions below to update the required fields. Do not change values presented above between the ################################# lines as is indicated.

  1. Update the playlist attribute in the front matter of this file.

    content/posts/article-title-slug.md
    ---
    playlist: "PLqDtPqS0UBnnm5fUqliJzBuXB_L_qr_yh"
    ---

    The value here should be a YOUTUBE_PLAYLIST_ID, which can be found in the playlists URL: https://www.youtube.com/playlist?list=YOUTUBE_PLAYLIST_ID.

  2. Update the title attribute in the front matter of this file.

    content/posts/article-title-slug.md
    ---
    title: "Include a short, descriptive title"
    # subtitle: "you can also include a subtitle - definitely use for podcast episode titles"
    ---
  3. Update the image attibute in the front matter:

    For playlists, YouTube does not generate card images by default like it does for individual videos. Because of this, it’s necessary that you define an image. You can, for exmaple, use the YOUTUBE_ID of the first video in the playlist.

    Below is the default behavior if no image value is defined.

    content/videos/article-title-slug.md
    ---
    image: https://img.youtube.com/vi/YOUTUBE_ID/hqdefault.jpg
    ---
  4. Update the author attribute array in the front matter of this file. Be sure to first follow the instructions above to define author profiles if needed.

    content/videos/article-title-slug.md
    ---
    author:
      - your-name # Author 1: a file at content/community/engage/people/your-name.md
      - collaboratorA # Author 2: links to a GitHub profile at https://github.com/collaboratorA
      - "Sayid Jarrah" # Author 3: does not have an author page or a GitHub profile.
    ---
  5. Update the categories attribute array in the front matter of this file. Choose only one of the listed available categories, and comment out the rest.

    content/videos/article-title-slug.md
    ---
    categories:
      - demos
    #   - livestreams
    #   - podcasts
    #   - talks
    #   - webinars
    ---

Update your content

You will see that the video is embedded on the page automatically.

Replace the dummy content at the bottom of the page with your own. Feel free to use the Text formatting for styling tips and common components.

When you’re finished, push to the repository and open a merge request.

Thanks for contributing!