<commit_before>---
layout: post
title: "How to Embed YouTube or Spotify on a GitHub Pages Blog"
date: 2018-11-09 14:45:00 -0500
tags: [post]
---

As I've been piecing this place together and learning how Jekyll works, I realized I could not figure out how to embed media from across the web, mainly YouTube videos or Spotify songs, albums, and playlists. After a bit of fiddling, I figured out the easiest way was to create standalone files in the _includes folder and then call an include tag on a post when I need to embed something.

First, create a file named youtubePlayer.html in the _includes folder and put this code in there:

```html
<iframe src="https://www.youtube.com/embed/{% raw %}{{ include.id }}{% endraw %}" 
    width="560" 
    height="315"
    frameborder="0" 
    allowfullscreen>
</iframe>
```

And then in a post, you do something like this:
```
{% raw %}
{% include youtubePlayer.html id=page.youtubeId %}
{% endraw %}
```

With the above syntax, include "youtubeid: ###" in the frontmatter of your post, as that's where it would pull the variable from. You could also just hardcode the youtube video's id into the above code snippet like this:

```
{% raw %}
{% include youtubePlayer.html id="4EU7vvSvV-0" %}
{% endraw %}
```

For a Spotify embed, it's similar, but will have to break out based on what you're sharing. There's a difference in the html between sharing a song, album, or playlist and each would require their own setup. I have mine as three different files in _includes: spotifyAlbumPlayer.html, spotifySongPlayer.html, and spotifyPlaylist.html. Here's what they look like:

YouTube Video:
{% include youtubePlayer.html id="4EU7vvSvV-0" %}<commit_msg>ugh this is fine for now<commit_after>---
layout: post
title: "How to Embed YouTube on a GitHub Pages Blog"
date: 2018-11-09 14:45:00 -0500
tags: [post]
---

As I've been piecing this place together and learning how Jekyll works, I realized I could not figure out how to embed media from across the web, mainly YouTube videos. After a bit of fiddling, I figured out the easiest way was to create standalone files in the _includes folder and then call an include tag on a post when I need to embed something.

First, create a file named youtubePlayer.html in the _includes folder and put this code in there:

```html
<iframe src="https://www.youtube.com/embed/{% raw %}{{ include.id }}{% endraw %}" 
    width="560" 
    height="315"
    frameborder="0" 
    allowfullscreen>
</iframe>
```

And then in a post, you do something like this:
```
{% raw %}
{% include youtubePlayer.html id=page.youtubeId %}
{% endraw %}
```

With the above syntax, include "youtubeid: ###" in the frontmatter of your post, as that's where it would pull the variable from. You could also just hardcode the youtube video's id into the above code snippet like this:

```
{% raw %}
{% include youtubePlayer.html id="4EU7vvSvV-0" %}
{% endraw %}
```

### Example
{% include youtubePlayer.html id="4EU7vvSvV-0" %}
{'fraction_non_alphanumeric': 0.10275352585627938, 'fraction_numerical': 0.020819341840161182, 'mean_word_length': 4.189895470383275, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '250155', 'n_tokens_mistral': 977, 'n_tokens_neox': 854, 'n_words': 413}