Youtube url not found

[cecileRx]

Hello there!
I have an issue with a full JS/ express website I am building. Any youtube url I set reach to a 404 ’ not found’ error.
In localhost it is working perfectly. Any help on this?
Thanks!
C

[al_ps]

Hi,

This doesn’t sound like a Render issue but a code one. You would need to check the URLs you’re trying to reach are correct/valid.

Or, if you could share some details, the community may be able to help with your issue.

Alan

[Ilka]

If your website is working perfectly on localhost but gives a 404 “not found” error for YouTube URLs when deployed, it could be due to a few potential reasons:

1. Cross-Origin Resource Sharing (CORS): Check if the YouTube API endpoint you’re accessing allows requests from your website’s domain. If not, the browser might block the request, resulting in a 404 error. Ensure that your CORS headers are properly configured on the server-side to allow cross-origin requests.

2. Proxy Server Configuration: If you’re using a proxy server or reverse proxy in your deployment setup, make sure it is properly configured to handle requests to the YouTube API. The proxy might be altering or blocking the requests, leading to the 404 error.

3. Environment-specific Dependencies or Configuration: It’s possible that there are environment-specific dependencies or configuration settings that differ between your local development environment and the deployed environment. Double-check these dependencies or configurations, such as API keys or environment variables, to ensure they are correctly set in the production environment.

To resolve the issue, you can try the following steps:

1. Inspect the Network Requests: Use browser developer tools (like Chrome DevTools) to inspect the network requests when accessing YouTube URLs. Look for any error messages, blocked requests, or CORS-related issues.

2. Review Your Server-side Code: Check the server-side code (Express) that handles the YouTube URL requests. Ensure that it is correctly implemented and not causing any errors or blocking the requests unintentionally.

3. CORS Configuration: If the issue is related to CORS, configure the server to allow requests from your website’s domain. Set appropriate CORS headers, allowing the necessary origins, methods, and headers.

4. Proxy Server Configuration: If you’re using a proxy server or reverse proxy, review its configuration to confirm that it is correctly forwarding the YouTube requests and not interfering with them.

5. Environment-specific Settings: Ensure that any environment-specific dependencies or configuration settings, such as API keys or environment variables, are correctly set in the production environment.

By carefully investigating these factors and making any necessary adjustments to your code or configurations, you should be able to resolve the 404 “not found” error for YouTube URLs on your deployed website.
Btw, You can also check out StreamFab and download some tutorial on Youtube.

[cecileRx]

Hello @al_ps, thanks for your answer.
Actually I have a data.json file living in the static folder

[
  {
    "id": 1,
    "name": "media 1 is a great video",
    "url_src": "https://www.youtube.com/embed/XUi580gA5BQ",
    "url_title": "The revolution will not be televised",
    "url_description": "Sound design for the top-grossing Miniclip game. World's #1 Pool game."
  },
  {
    "id": 4,
    "name": "8Ball Pool (Online, Mobile)",
    "url_src": " https://youtube.com/embed/L88roY6ov0Q",
    "url_title": "8ball Pool",
    "url_description": "Sound design for the top-grossing Miniclip game. World's #1 Pool game."
  }
]

Then a ProjectView.js that refers to this json file:

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
  constructor(params) {
    super(params);
    this.setTitle("Viewing Project");
  }

  async getHtml() {
    console.log("this is the params", this.params.id)

    const requestURL = '/static/data.json';
    const request = new Request(requestURL);

    const response = await fetch(request);
    const mediaList = await response.json();

    function filterById(jsonObject, id) { return jsonObject.filter(function (jsonObject) { return (jsonObject['id'] == id); })[0]; }

    let media = filterById(mediaList, this.params.id);
    console.log(media.url_link)

    return `
      <div class="video-project">
        <h2 class="video-project-title"> ${media.name} </h2>
        <div class="video-container">
          <iframe src=${media.url_src} style="margin-right: 1%; margin-left: 1%;" width="98%" height=""  title=${media.url_title}
        frameborder="0" allowfullscreen></iframe>
         </div>
        <p class="video-description">${media.url_description}</p>
      </div>
    `;
  }
}

When inspection the network request I got this (see screen shot)

Any clue on what I can do to fix the error?
Thanks!