styling embedded iframe responsive behaviour

vue-theme/src/pages/single.vue

@@ -261,7 +261,7 @@ export default {
             position: relative
             width: 100% 
             padding-bottom: 56.25%
-            margin-bottom: $ms-7 
+            margin-bottom: 7em
             &__wrapper
                 display: contents
             /* TBD if kept- edit ot test */
@@ -269,18 +269,21 @@ export default {
                 position: absolute
                 top: 100%
 
+        /* iframe container 16:9 */
         [class^="iframe-container"]
             position: relative
-            width: 100% 
-        /* iframe container 16:9 */
-        .iframe-container 
             padding-bottom: 56.25% 
+            /* width: 100%  */
         /* iframe container portrait */
         .iframe-container-v
             height: 100%
             padding-bottom: 125%
         iframe 
+            position: absolute
+            top: 0 
+            left: 0
             width: 100% 
+            height: 100%
 
         /* separator styles */
         * hr
@@ -310,10 +313,7 @@ export default {
 
         breadcrumb
             h5
-                /* color: yellow */
                 color: $cia_red
-                /* font-weight: 400 */
-                /* padding: $ms--6 0 */
         
         //- end of article icon
         footer
@@ -329,4 +329,7 @@ export default {
             margin: 0 0.65em 0 0
         &.f-col
             flex-direction: row
+            .wp-block-embed, .is-type-video
+                margin-bottom: $ms-9 
+
 </style>