Embedded responsive video is cropped

Tan_Sackett · ‎Apr 9, 2019

I embedded a Vimeo video on this page (https://go.mpulsemobile.com/activatex) following the instructions on this page (https://knowledge.hubspot.com/articles/kcs_article/cos-pages-editor/how-do-i-make-my-embedded-youtub...). The video is responsive but the top and bottom of the video are cropped off. Any thoughts as to how to fix this?

Designer_WOT · ‎Apr 10, 2019

Main cause of issue is that in ActivateStylesheet.css file element .hs-responsive-embed iframe has given property top:20px. Which results in cropping of video.

Option 1: To resolve this issue we can change css property top:20px; to top:0px; in css file.

Option 2: Don't worry if you are not technical enough to change it from css file than you may add below code in page editors html.

<style>
    body .hs-responsive-embed iframe { top:0px }
</style>

Below screen shows where to add code..

View solution in original post

Designer_WOT · ‎Apr 10, 2019

Main cause of issue is that in ActivateStylesheet.css file element .hs-responsive-embed iframe has given property top:20px. Which results in cropping of video.

Option 1: To resolve this issue we can change css property top:20px; to top:0px; in css file.

Option 2: Don't worry if you are not technical enough to change it from css file than you may add below code in page editors html.

<style>
    body .hs-responsive-embed iframe { top:0px }
</style>

Below screen shows where to add code..

CMS Development