changing iframe src without page reload in Angular 4

I want to play some youtube videos on my page based on the button clicked by the user. I crossed all the hurdles of safe urls and updating the src on button click but when I am changing the source I see a page reload which I feel a strong drawback as on page reload all the data in my services will be lost.

Can someone suggest how to do this without page reload?

Below is my code:

Template

<iframe width="600" height="400" [src]="VideoURL" frameborder="0"></iframe>
    <ul>
        <li *ngFor="let course of courses">
            <button (click)="changeVideo(course.url)">{{course.name}}</button>
        </li>
    </ul>

Component

export class CoursesComponent implements OnInit  {
  constructor(public router: Router,private sanitizer: DomSanitizer,private _coursesService: CoursesService) { }

  courses=this._coursesService.getCourses();
  ngOnInit() {
  }
    trustSrcUrl = function(data){
    return this.sanitizer.bypassSecurityTrustResourceUrl(data);
  }
  VideoURL=this.trustSrcUrl(this.courses[0].url);
  changeVideo=function(url){
      this.VideoURL=this.trustSrcUrl(url);
  }

Every example I see on net, both in angular and plain javascript are having this drawback of page reload.