Skip to main content

Posts

Showing posts with the label html

Things I Learned: OpenAI To Create CSS, HTML, and JavaScript for a YouTube QSO Video Deck

  I used ChatGPT to crank out a new blog feature: a slide deck that shows all the QSO videos from an activation.  Before I get started, allow me to admit that I just found out that YouTube provides code to embed a playlist on an html page. I didn't know this when I started this project, and frankly, I'm kinda happy about that. If I found an embedded playlist, it would not have been obvious to me that there was more than one video. I would have missd all the others. An example of the resulting video deck can be seen on the field report from my latest POTA activation. I asked ChatGPT to create the CSS and HTML for a video deck presented on a statically served HTML page. It got really close on the first attempt. I only had to refince the code a bit to get exactly what I wanted. The AI even dumped out JavaScript code I hadn't remembered to ask for to control the deck. Later I realized that adding video links one at a time to my blog page was a bit tiresome. I asked the AI to w...

Things I Learned: Embedding YouTube Shorts

 For me at least, there's no embed button on the share tab for YouTube shorts. I figured out how to get the videos in anyway. Step 1: Start with an embed iframe from any of your videos that aren't shorts. For example: <iframe width="560" height="315" src="https://www.youtube.com/embed/idZ80-7WR4w?si=CFqyqDeqzq24OLVh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> Then, grab the web link to your short from the sharing tab that you can access For example: https://youtube.com/shorts/5D1Bue0KSss?si=3MnCtoyuuxqOJbdh Copy the portion of the link that follows 'shorts/'. In the above example, you'd copy: 5D1Bue0KSss?si=3MnCtoyuuxqOJbdh Paste it into your usual iframe over the portion o the link that follows 'embed/' like so: <iframe width="560" height=...