Angular, Как использовать переменную для источника iframe?

Question

Я хочу использовать iframes из youtube и других подобных платформ - но я не могу узнать, как использовать переменную в качестве моего источника.

Я уже искал это, но ответы, которые я получил, не сработали.

Итак, вот 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>

Единственное, что я хочу, это использовать эту переменную здесь:

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';
}       

Но когда я пытаюсь сделать это различными способами, например, например:

src="{{source}}"

это вообще не работает: (

Кто-нибудь знает, как это сделать правильно? Я не могу найти правильное решение этой проблемы.

Answer 1

Что вы пробовали до сих пор? Нашел это, может быть, это работает для вас: https://stackblitz.com/edit/angular-youtube-video-in-iframe