Today I updated my NASA Space Dashboard to better handle the APOD. While the website previously worked for photos, I’ve now added the logic needed to support videos and descriptions.
fetch("https://api.nasa.gov/planetary/apod...")^This hits the NASA API, retrieves the daily data, and selects the correct HTML elements to inject the content into. I also ensured the apodTitle and apodDesc update every time so the user can read the context behind the visuals.
if (data.media_type === "image")^This check handles the standard case. If the API returns an image, the app creates an element, sets the source, and rounds the corners to match the dashboard’s aesthetic.
if (data.url.endsWith(".mp4"))^I added this specifically for NASA-hosted video files. It creates a native player with user controls, making sure the video spans the full width of the section.
function getEmbedUrl(url)^Since many APOD updates are actually youTube or Vimeo links, I wrote this helper function. It detects “watch” links and converts them into “embed” links so they can actually play inside an iframe on my site without being blocked.
Leave a Reply