[player] Improve styles for images and videos

Consider the available space for width and height
Increase their default heights

projects/common/element-components/image.component.ts

@@ -7,6 +7,8 @@ import { ElementComponent } from '../element-component.directive';
   template: `
       <img [src]="elementModel.src | safeResourceUrl"
            alt="Image Placeholder"
+           [style.object-fit]="'contain'"
+           [style.height.%]="100"
            [style.width.%]="100">
   `
 })

projects/common/element-components/video.component.ts

@@ -6,6 +6,8 @@ import { ElementComponent } from '../element-component.directive';
   selector: 'app-video',
   template: `
       <video controls [src]="elementModel.src | safeResourceUrl"
+             [style.object-fit]="'contain'"
+             [style.height.%]="100"
              [style.width.%]="100">
       </video>
   `

projects/editor/src/app/UnitFactory.ts

@@ -175,7 +175,8 @@ export function createRadioButtonGroupElement(): RadioButtonGroupElement {
 export function createImageElement(imageSrc: string): ImageElement {
   return {
     src: imageSrc,
-    ...createUnitUIElement('image')
+    ...createUnitUIElement('image'),
+    height: 100
   };
 }
 
@@ -189,7 +190,8 @@ export function createAudioElement(audioSrc: string): AudioElement {
 export function createVideoElement(videoSrc: string): VideoElement {
   return {
     src: videoSrc,
-    ...createUnitUIElement('video')
+    ...createUnitUIElement('video'),
+    height: 100
   };
 }