Utilize ng-repeat in Angular to seamlessly integrate YouTube videos into your webpage

I'm currently using the ng-repeat directive in Angular to display a series of videos obtained from the server.

The video IDs are received from the server and the code looks like this:

<div ng-repeat="media in product.media">
    <div class="thumbnail">
        <div class="video-container">
            <iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
        </div>
    </div>
</div>

However, upon viewing the output, the video does not appear. Additionally, when I inspect the element in Google Chrome, it seems that the HTML remains unchanged:

Any suggestions or ideas on how to resolve this issue?

javascriptangularjsyoutube

Answer №1

Starting from version 1.2, AngularJS only allows binding one expression to *[src], *[ng-src], or action. More information on this update can be found here.

To implement this change, use ng-src in your HTML as follows:

ng-src="{{getIframeSrc(media.src)}}"

In the controller, include the following code snippet:

$scope.getIframeSrc = function(src) {
  return 'https://www.youtube.com/embed/' + src;
};

Remember to specify the protocol when adding the URL.

Additionally, ensure that the URL is trusted by configuring the $sceDelegate service as shown below:

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

Check out a demo of this implementation here: http://plnkr.co/edit/4U5HxNnVDwlF5udRiQa1?p=preview

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

Tailored design - Personalize interlocking elements

I am currently working on a custom theme and I am trying to adjust the font size of Menu items. In order to achieve this, I have identified the following elements in the tree: ul (MuiMenu-list) MuiListItem-root MuiListItemText-root If I want to modify th ...

javascriptcssreactjsmaterial-ui

Utilize the reference of a prop within a callback

I'm facing an issue where I am unable to reference the vue props within a callback in vue-chartjs. Whenever I try to access 'this', it gives me an 'undefined' error in the console log. Can someone please advise on the correct way t ...

javascriptvue.jsvuejs2vue-componentvue-chartjs

How to overcome the issue of Vue.js mobile router-link being blocked by v-on:mouseover

Here is a for list snippet: <li class="projects-item" v-for="project in filteredProjects" :key="project.id" v-on:mouseover="displayHoverInfo($event, project)" v-on:mouseleave="hover = false" > <router-link v-bind:to="'/project/ ...

javascriptvue.js

JS instant Toggle (just one click) - initial value of toggled item

Can you explain why we have to click twice on this link (http://jsfiddle.net/xL8hyoye/4/): html: <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo< ...

javascripthtmlcss

Is it possible to use JQuery to swap out a blank div with the outcome of a load event?

I have a placeholder div nested inside another div. My goal is to swap out the placeholder div with data retrieved from a .load() call when the parent div is clicked on using its onclick function... Here's an example: function switchContent(projec ...

javascriptjquery

Issue with processing secure 3D payments on live mode in Stripe

I am currently implementing 3D secure payment on a website. It works perfectly in the test environment with test cards, but when I switch to live keys, it does not generate a pop-up for user confirmation. Instead, it completes the payment without any confi ...

javascriptphplaravelstripe-payments3d-secure

Setting up initial values for React properties

Below is the React code snippet I am currently working with: this.state = { colsHiddenStatus: new Map([['rowNumber',true], ['id', false], ['firstName', false], ['lastName', false], ['mobile', false], [&a ...

javascriptreactjsecmascript-6

What is the best way to pass arguments to a controller in AngularJS?

As I develop a basic forum website with the mean stack, I have reached the stage of showcasing the content related to a specific topic. To achieve this, I have incorporated an ng-model that prompts the user to input the topic name before querying my mong ...

angularjsmongodb

Is it possible to update a nested array using the onChange function in useState?

In my application, I am dealing with a simple state that consists of an array of objects. One of these objects contains another array of objects inside it. While I have successfully implemented an onChange handler to modify the basic state, I am encounteri ...

javascriptarraysreactjsstate

Navigating the Forge Viewer on Two Separate HTML Pages

I've been working on a website that incorporates the autodesk-forge viewer, and I've successfully implemented various functions in a standard JavaScript (.js) file. These functions include displaying the viewer and isolating specific parts when a ...

javascripthtmlautodesk-forgeautodesk-viewer

Accessing nested keys within an object and comparing them to keys within another object, with the distinction that the second object contains an array of objects

I encountered a challenge while trying to compare and access data within nested objects and match them with an array of non-nested objects. To illustrate, the scenario looks something like this: const members = [ { name: 'Angelica&apos ...

javascriptarraysreactjsobject

Using AngularJS and Jasmine to tackle challenges in writing spec tests

After setting up my seed and successfully getting Jasmin Running (huge thanks to SoEzPz for the assistance), I encountered an issue with my specs. When I tried to write a spec on a controller, it resulted in errors. However, when running an isolated spec, ...

angularjsjasmine

Eager loading BelongsToMany results in retrieving multiple objects for every association

Within my application, I have established two models: User and EconomicActivity. These models are linked together through a relationship called UserEconomicActivity, which uses a BelongsToMany association. In the User model, the association is defined as f ...

javascriptnode.jsormsequelize.js

Switching an element from li to div and vice versa using Jquery Drag and Drop

I am currently experimenting with the following: Stage 1: Making the element draggable from li to div upon dropping into #canvas Placing the draggable element inside #canvas Stage 2: Converting the draggable element from div back to li when dropped i ...

javascriptjqueryjquery-uidraggabledroppable

guide on launching react with pure javascript

Is it feasible to operate react "straight out of the box" using only JavaScript? In essence, I am seeking a way to utilize react by simply utilizing notepad to create the page (without needing to install and configure node etc.). More specifically - 1) ...

javascripthtmlreactjs

What are the steps to validate an Ajax form using Dojo JavaScript?

Currently, I am in the process of validating a form that has been written in Javascript/Dojo before sending it via Ajax. Here is the code snippet: <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConf ...

javascriptajaxdojovalidation

A guide on utilizing the img src attribute from vuex through a loop

I'd like to retrieve the image source from vuex and display it by looping through a div Here's what I have in mind: <div v-for="({image}, index) in allData" :key="index"> <img :src="image" :alt="index"/> </div> <script ...

javascriptvue.jsvuex

Fade out embedded images or target specific classes when hovering over them with the mouse

Is it feasible to use JavaScript or jQuery to fade only the embedded image instead of the entire div, revealing the background image of the div? I have multiple instances of the classes below and wish to apply these changes only to the selected ones. For ...

javascriptjqueryhtmlcss

Guide to implementing conditional inline styling within React

I am attempting to incorporate a condition for inline styling, but I keep receiving this error message: Error: The `style` prop requires a mapping from style properties to values, not a string Here is the code in question: <div className="todo&quo ...

javascriptreactjs

Extract data from an RSS feed and showcase it on an HTML webpage

Having trouble parsing a Yahoo Finance RSS news feed and displaying the information on a webpage. I've tried different methods but can't seem to get it right. Hoping someone out there can assist me with this. I came across a tutorial on how to p ...

javascriptjqueryhtmlrssyahoo-finance