Angular, How to use Variable For iframe source?

Question

I want to use iframes from youtube and other similar platforms - but I can't find out how to use a variable as my source.

I've searched for it already, but the answers I got didn't work out.

So here is the iframe:

<div class="right">
    <h2>Associated Pictures/Media Files</h2>
    <p>Here we will display either Infos, Fotos, Videos, Music or even interative content.</p>
    <div style="padding: 2%;">
        <iframe 
        width="100%" 
        height="315" 
        src="https://www.youtube.com/embed/Q7hmXN714RQ" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
        </iframe>
    </div>
</div>

the only thing I want is to use this variable here:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  source = 'https://www.youtube.com/embed/Q7hmXN714RQ';
}

But when I try to do it in various ways - like for example:

src="{{source}}"

this doesn't work at all :(

Does anyone know how to do this right? I cannot find a proper solution for this problem.

Ronald Korze · Accepted Answer · 2019-06-12 11:19:58Z

19

What have you tried so far? Found this, maybe this works for you: https://stackblitz.com/edit/angular-youtube-video-in-iframe

answered Jun 12, 2019 at 11:19

Ronald Korze

8486 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miger Over a year ago

Thanks, yes the DomSanitizer is what I was looking for.. However this stackblitz doesn't seem to work.. at least on my end it doesn't..

Miger Over a year ago

Alright, in my project at least the example worked, thanks a lot!

Collectives™ on Stack Overflow

Angular, How to use Variable For iframe source?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related