Embedded responsive video is cropped

SOLVE
New Contributor

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?

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

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..

video-cropping.jpg

1 Reply 1
Highlighted
Regular Contributor

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..

video-cropping.jpg