Product Landing Page - Video (YT) Embed Question

Code Feedback
1

Hello,
My product landing page is currently a work in progress. I’ve been working on it in visual studio code and loading in my browser to understand workflow better.

I embedded a Youtube video a few days ago, and kept getting a “video unavailable” error when running it locally. The video would show up, but when I would click it to play, I would get this error. I spent my allotted webdev time the past few days trying to figure out why. After being exasperated, today I just copy/pasted my code into Codepen, and the video actually plays.

Could someone explain why I’m running into this? I have a tendency to get hung up on small things until I understand what is going on.

Here is my Codepen. It’s still a WIP, and I’m not necessarily looking for feedback as a result (just yet), but will gladly take any constructive criticism.

Thanks for the help!

2

Hey there,

nice WIP so far!

Regarding YT:

  • Where do you get the URL/code for the video from?
  • Do you see some errors in the Dev Tools?
3

Thanks!
I pulled the code using the embed function on the YoutTube video Share feature.

I have not run into issues with the DevTools; this was just more general curiosity…if this is something I would run into in the future…running WIP from the files on my local machine, versus through an online editor like Codepen.

4

Alright, I think that’s the best approach.

When the video doesn’t work, I would do something like this:

  1. Reload the browser page
  2. Check the Dev Tools Console for errors
  3. Check the Dev Tools Network for errors
  4. Check if the video works directly on YT in the browser
  5. Test it in a different browser
  6. Deactivate all browser extensions (e.g. adblockers block requests)
5

Thanks for the bulleted list, I’ll keep this in mind/saved for future needs :call_me_hand: