I did a bunch of random stuff on the site recently, and I just wanted to kind of show some of it off -- it took me a bit to figure some of it out, though a lot of the stuff that helped me is pretty easy to find. I finally went and made the code presentable :D

YouTube

This is what a YouTube embed looks like:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;
web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

The dQw4w9WgXcQ bit is the ID. Actually, it gives you a bunch of other stuff in the URL when you grab an embed, but 1) you don't need any of it to make this work and 2) I don't know what it is really. I was feeling lazy when I first started working on this so I just looked up how to match the ID in the URL, and luckily, this wasn't a new problem at all:

/^.*(youtu.be\/|v\/|u\/w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/

This is what it ended up looking like in .eleventy.js:

eleventyConfig.addNunjucksShortcode("ytembed", function(url) {
    // get ID
    const re = /^.*(youtu.be\/|v\/|u\/w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    match = url.match(re)
    match = match && match[2].length === 11 ? match[2] : null
    return `<iframe width="560" height="315" class="yt-embed"
            src="//www.youtube.com/embed/${match}"
            frameborder="0" allowfullscreen></iframe>
            <noscript><a href="${url}">${url}</a></noscript>`
})

Important thing to note: I added <noscript> so that you can still see a link if you're using, like, a browser that doesn't support JavaScript. This is a personal goal I've made in working on this site that I've had to work around quite a bit, and I do quite a lot of site testing in ELinks (which technically does have JS support, but I can't get it working, nor do I really want to all that much.)

SoundCloud

I thought this was gonna be a lot more difficult, but it turned out to be much easier. SoundCloud actually just uses the same URL as an identifier for embeds, so I basically just did the exact same thing as with YouTube but minus grabbing the ID. Here's what that looks like (sorry in advance for uh... the length lol. I'll fix that later):

eleventyConfig.addNunjucksShortcode("scembed", function(url) {
    return `<iframe width="100%" height="315" scrolling="no"
        frameborder="no" allow="autoplay"
        src="https://w.soundcloud.com/player/?url=${url}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
        <a href="https://producer.ua" style="display:none;">
        talent manager</a></iframe>
        <noscript><a href=${url}>${url}</a></noscript>`
})

I actually grabbed the base embed code from SoundCloud embed code generator. This presented 2 problems for me...

1. It looks different from the other ones I put manually on the site.
2. If I used this in the other places on the site, it's... really tall. Too tall, really. So I had to make a second one that looks better outside I Post Music Every Day (Sometimes). This was pretty easy, I just made a second shortcode that's the same thing but... shorter (again, sorry lol).

eleventyConfig.addNunjucksShortcode("scembed_sm", function(url) {
    return `<iframe height="166" width="100%" scrolling="no"
        frameborder="no" allow="autoplay"
        src="https://w.soundcloud.com/player/?url=${url}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
        <a href="https://producer.ua" style="display:none;">
        talent manager</a></iframe>
        <noscript><a href=${url}>${url}</a></noscript>`
})

Anyways...

Not a super crazy update, I don't have a lot of anything else I want to talk about like I usually would. I'm busy with finals right now and also on vacation, so thought this would be a quick post to put together. I also had a lot of fun writing this, even though it took me, like, maybe 20 minutes lmao.

I hope everyone is having a lovely Thanksgiving <3 Thank you for reading