Add youtube embeds

Client/src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 
-<img id="background-image" src="assets/images/home-images/tiny/wood.jpg" alt="background image" width="100%">
+<img id="background-image" src="assets/images/home-images/tiny/sunset_b.jpg" alt="background image" width="100%">
 
 <div id="filler">
     <div id="live-stream-container" *ngIf="countdown && countdown.showCounter">

Client/src/app/components/home/video-services.ts

@@ -8,4 +8,5 @@ export class VideoService {
     src: string;
     date: Date;
     archived: boolean;
+    yt: string;
 }

Client/src/app/components/live-stream/live-stream.component.css

@@ -4,7 +4,7 @@
     height: 0;
     padding-bottom: 56.25%;
 }
-.video {
+.video-container iframe {
     position: absolute;
     top: 0;
     left: 0;

Client/src/app/components/live-stream/live-stream.component.html

@@ -1,8 +1,11 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent class="mapWrapper">
         <h2 *ngIf="!showVideo">{{message}}</h2>
-        <div class="video-container" *ngIf="showVideo">            
+        <div class="video-container" *ngIf="showVideo && !yt">            
             <video [class.opacity-zero]="!showVideo" *ngIf="!error" style="width:100%" [src]="videoSrc" controls [poster]="poster" (error)="vidError()"></video>   
+        </div> 
+        <div *ngIf="showVideo && yt" class="video-container">
+            <iframe [src]="yt | safeUrl" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>   
         <div style="margin-top: 10px">              
             <button routerLink="/video" style="margin-top:5px; width:100%;" mat-stroked-button>

Client/src/app/components/live-stream/live-stream.component.ts

@@ -21,6 +21,7 @@ export class LiveStreamComponent implements OnInit {
   
   
   public videoSrc: string = this.sermonVideo;
+  public yt: string;
   public poster: string = this.clickToPlay;
   public error: boolean = false;
   public showVideo: boolean = false;
@@ -52,6 +53,7 @@ export class LiveStreamComponent implements OnInit {
           this.showVideo = true;
             this.videoSrc = '';
             this.videoSrc = service.src;
+            this.yt = service.yt;
             clearInterval(this.interval);
         }
       }  else {

Client/src/app/components/video-services/video-services.component.css

@@ -0,0 +1,13 @@
+.yt-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+  }
+
+  .yt-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }

Client/src/app/components/video-services/video-services.component.html

@@ -5,7 +5,10 @@
                 <i ofbicon class="mr-10" >live_tv</i>
                 {{getTitle(i)}}
             </button>
-            <video style="width:100%" *ngIf="video.show" src="{{video.src}}" controls poster="https://ofbbutte.com/static/media/video/ClickToPlay.jpg"></video>
+            <div *ngIf="video.show && video.yt" class="yt-container">
+                <iframe [src]="video.yt | safeUrl" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>            
+            <video style="width:100%" *ngIf="video.show && !video.yt" src="{{video.src}}" controls poster="https://ofbbutte.com/static/media/video/ClickToPlay.jpg"></video>
         </div>      
     </div>
     <div sideBar class="side-bar">

Client/src/assets/json/videoServices.json

@@ -1,12 +1,13 @@
 {
     "videos": [
         {
-            "isReady": false,
+            "isReady": true,
             "title": "Sunday Morning",
             "src": "https://ofbbutte.com/static/media/video/2020-03-29 1100 Pastor Derek Loewen.mp4",
-            "date": "2020-03-29T11:00:00-06:00",
+            "yt": "https://www.youtube.com/embed/kqipYdaQc3k",
+			"date": "2020-03-29T11:00:00-06:00",
             "archived": false,
-            "message": "Please Stay Tuned Until 3/29/2020 at 11:00 AM MDT"
+            "message": "Please Wait... Service will begin in aproximately 15 minutes"
         },
         {
             "isReady": true,