Encountered an Angular 1.6 Error: The requested URL at http://127.0.0.1:56035/[url] could not be found (404

I've hit a roadblock in my project and can't seem to figure out the issue.

The file I'm working on is supposed to display an iframe video player with a YouTube embed. I tried using interpolation to construct the correct URL:

<div class="video-player">
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" ng-src="{{'www.youtube.com/embed/' + $ctrl.video.id.videoId}}" allowFullScreen></iframe>
  </div>
  <div class="video-player-details">
    <h3>{{$ctrl.video.snippet.title}}</h3>
    <div>{{$ctrl.video.snippet.description}}</div>
  </div>
</div>

However, each time I run my code, I encounter this error in the console:

angular.js:3626 GET http://127.0.0.1:56035/www.youtube.com/embed/OPxeCiy0RdY 404 (Not Found)

What's perplexing is that when I inspect the elements after running the program, it adds a #document property with additional HTML tags inside the iframe:

<iframe class="embed-responsive-item" ng-src="www.youtube.com/embed/OPxeCiy0RdY" allowfullscreen="" src="www.youtube.com/embed/OPxeCiy0RdY">
   #document

   <html><head></head><body>Cannot GET /www.youtube.com/embed/OPxeCiy0RdY
   </body></html>

</iframe>

I'm trying to identify the root cause of this error and why the video isn't displaying in the player. I also have two other files, index.js and videoPlayer.js, which may be contributing to the problem:

index.js:

angular.module('video-player', [])
.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**',
    'https://www.googleapis.com/youtube/v3/search'
  ])
});

And here's videoPlayer.js:

angular.module('video-player')

.component('videoPlayer', {
  bindings: {
   video: '<'
  },
   templateUrl: 'src/templates/videoPlayer.html'
});

If anyone can help me pinpoint where I might be going wrong, I would greatly appreciate it. I've exhausted all my troubleshooting efforts but can't seem to find the exact cause of the issue preventing the iframe from displaying.

PS: We utilize live-server for our server

javascriptangularjsiframe

Answer №1

Upon reviewing your follow-up comment, it appears that the solution to your issue may involve implementing the following code snippet and ensuring that you adhere to @Striped's advice regarding setting your URL:

<iframe id="iframe" ng-src="{{$ctrl.redirectUrl | trusted}}">
   <p>Your browser does not support iframes.</p>
</iframe>

Make sure $ctrl.redirectUrl is defined in your controller as shown below:

$ctrl.redirectUrl = "https://www.youtube.com/watch?v=XIJHg1XWR7o";

Next, create the trusted filter as follows:

app.filter('trusted', ['$sce', function ($sce) {
  return function (url) {
    return $sce.trustAsResourceUrl(url);
  };
}]);

Please inform me of any progress or issues encountered. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to Generating Downloadable Links for JPG Images Stored in MongoDB Using Node.js

I have successfully uploaded an image to MongoDB as a Buffer. Now, I need to figure out how to display this image in my React Native app using a URL, for example: http://localhost:8080/fullImg.jpeg How can I achieve this? Below is the MongoDB Schema I am ...

javascriptnode.jsmongodb

Angular ng-repeat is incompatible with the JSON parser

I am facing an issue with accessing JSON objects and setting values into Angular Ui-grid. The problem arises when some of the fields in my JSON object are actually JSON strings. I attempted to convert these fields into JSON objects using JSON.parser, but e ...

javascriptangularjsjsonangular-ui-grid

Creating a PHP script that retrieves data from JavaScript and stores it in MySQL can be accomplished by using AJAX to send the

Hello, I am attempting to create a PHP script that can extract coordinates from this JavaScript code (or from this link ) and store them in a MySQL database. Can someone please provide me with a tutorial on how to accomplish this? <script> var ...

javascriptphpmysql

Do not forget to implement Array.find when working with the useSWR hook in Next.js

I have the following code: const fetcher = (url: string) => axios.get(url).then((r) => r.data); const {data} = useSWR("api/data", fetcher, {refreshInterval: 10000}) console.log(data.find(d => d.id === "123")) The API path is ...

javascriptnext.js

The Material-UI Select component does not reflect changes after an onChange event

I've encountered this issue all over the internet, but no explanation seems to resolve it for me. Using Material-UI Select and traditional setState(...) in React (not using hooks). The core of my component is as follows: class MyComponent extends Co ...

javascriptreactjsmaterial-uistate

PHP failing to retrieve information

Having trouble with this specific file as it seems to be missing data in the address fields. Additionally, whenever "notes" are inputted, the Address data disappears. Any thoughts on how to resolve this issue? <tbody> ' ; $message .=&a ...

javascriptphpjquery

On the initial click of the button, the color will switch, and on the subsequent click,

I have created a basic HTML structure with a paragraph and a button. Upon clicking the button, I need different actions to take place. Specifically, on the first click, I want to change the color of the paragraph. On the second click, I aim to alter the fo ...

javascriptjqueryhtml

Do I have to divide the small functions in my Node.js controller into smaller ones?

When signing up users in my controller, do I need to break up the sign-up steps into individual asynchronous calls or is one big asynchronous call sufficient? Each step relies on the previous one: Validate user Create user Create group Add user to group ...

javascriptnode.jsasynchronousq

Sending a parameter to the window.onload callback function

Is there a way to pass parameters from ModelAndView to a window.onload function in JavaScript within an HTML file? Here is an example of how it can be done: @RequestMapping(value = "/admin/printtext") public ModelAndView printtext() { ModelAndView mo ...

javascripthtmlspringspring-boot

Using Python's Requests library to authenticate on a website using an AJAX JSON POST request

I'm a beginner in Python and struggling to create the correct code for using Python requests to log in to a website. Here is the form code from the website: <form autocomplete="off" class="js-loginFormModal"> <input type="hidden ...

javascriptjquerypythonjsonajax

Retrieving Information from Ajax Call Using Python

I am struggling to figure out how to retrieve data from an Ajax request in my JavaScript code within a Python Flask application. The Ajax request I am working with does not involve jQuery. I have attempted using request.form.get() and request.get_json() i ...

javascriptpythonajaxflask

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js

How can I create an element in Javascript that does not inherit any CSS styles?

I'm creating a basic userscript with Greasemonkey for a school project that inserts a bright yellow box containing links onto all websites. Currently, my approach is straightforward: var guesses_div = document.createElement("div"); guesses_div.style. ...

javascripthtml

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

Let's say I have HTML code like this: <div> <p> start<span>span</span>end </p> </div> I am looking for a way to retrieve the offsets when text is selected, while still taking into account the presence of span ...

javascriptjqueryhtml

Looking to retrieve the numerical values from a given array

I have a set of data in the following format: ['32 68', '56 78', '77 99'] I am looking to output another set of data that will consist of the sums of each pair of numbers by index using JavaScript in NodeJS. For example, [& ...

javascriptarraysnode.js

List of items displayed in alphabetical order using the ng-repeat directive:-

I'm working with an ng-repeat block in the code snippet below. My goal is to have the placeholder [[THE ALPHABET]] render as a, b, c, d representing bullets for the list in their respective order. There will always be 4 values present. What would be t ...

javascriptangularjsangularjs-ng-repeatalphabet

Encountering a 403 error when attempting to upload files from Angular to a Micron

I have encountered an issue while attempting to upload multiple files to the Micronaut Rest API. The uploading process works seamlessly with Postman and Swagger in the Micronaut Rest API, but when using the Angular app, the POST method throws a 403 HTTP er ...

javascriptjavaangularfile-uploadmicronaut

Troubleshooting Issue with React Router Component Displaying Blank Page

I have been working with React Router in an attempt to connect my App.js and Car.js components. I have included {this.props.children} in both components, but the connection is not functioning as expected. When I deploy my app, there is no sign of the Car.j ...

javascriptreactjscomponentsreact-routerrender

What is the process for spinning a span in the center of an image?

My canvas displays an image: https://i.sstatic.net/p3MV4.png There is a white square with a refresh icon on the right side of the image, slightly hidden by a black circle. I implemented it like this: var rotatorSpan = document.createElement("span"); rot ...

javascripthtmlcss

Discover and capture zip codes using javascript

Looking to extract zip codes from strings like "HONOLULU HI 96814-2317 USA" and "HONOLULU HI 96814 USA" using JavaScript. Any suggestions on how to achieve this? ...

javascriptangularjs