DP-6712 Fix the Video Dimensions on the Service Detail Page

[ygannett]

Description

The container for video, .ma__video, and iframe, .ma__iframe, didn't have the styles which other content container in the main column have:

    margin-left: auto;
    margin-right: auto;
    padding-right: 500px;

This was causing to iframe and video to stretch to fill its parent container when the side column content is not available.

Those missing styles are added to .ma__video and .ma__iframe to maintain the same width as other content in the main column.

Related Issue / Ticket

• DP-6712 Fix the Video Dimensions on the Service Detail Page

Steps to Test

Note: Even the change is made in Mayflower, you don't see it in the sample pages set up in Mayflower. You need to test it in Drupal.

1. Build the site with the tag, 5.10.1-alpha-67124.
2. Create a service detail page with video, iframe and some sections. Do not add any side content. You can use 'mass.local/service-details/massachusetts-traffic-map/' as a sample and add video.
3. Go to the generated page and see the video and iframe have the same width as other section content. In another words, they are lined up on the right side along with other section content, no sticking out. See below screenshot, After.
4. When you inspect .ma__iframe, you'll find the following styles:

.main-content--full .page-content > .ma__iframe {
    margin-left: auto;
    margin-right: auto;
    padding-right: 500px;
}

5. When you inspect .ma__video, you'll find the following styles:

.main-content--full .page-content > .ma__video {
    margin-left: auto;
    margin-right: auto;
    padding-right: 500px;
}

Note:
Videos are adjusted to fit in the given space for their widths and heights, but iframe are not. When the linked content (the page in the iframe) is bigger than the .ma__iframe (= iframe size), users need to use iframe's scroll bars to see overflow content. This is the same condition seen in mobile in the current production.

Screenshots

Before

After

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...

[mrossi113]

This PR has passed ER! 👍

[yriahi]

LGTM