Video in Header Movil

Regular Contributor

Hi Good day

 

I am workin in my web page and I added a video in the main banner of the home but in the mobile version said video does not cover the space that corresponds to the header in mobile.

Cómo puedo hacer para que mi video se pueda ver completo en el espacio correspondiente al encabezado del home?

I add a screenshot

Encabezado_versión_movil_video.PNG

 

 

This is the link of the view in movil of my page:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

I remain to your comments.

Regards.

Reply
0 Upvotes
3 Replies
New Member

Background video depend on aspect ratio of video,
1: If we will display full video width on mobile then It will show white space from top and bottom
2: And on other side if we show full video height then It will crop the video width from left and right side.

In your case you should use this css on media query (It will crop video from left and right)

@media only screen and (max-width: 768px) {
   .video-home {
       height: 100vh;
       width: 100vw;
       object-fit: cover;
   }
}


But I have a suggestion for this, you must wrap your banner video and content into a div and then use position css for banner content and video something like this:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Reply
0 Upvotes
Regular Contributor

Hi Thanks for the solution, but in my movil the video is not reflected yet.

This is the link of my page test: https://www.inbest.cloud/pruebahome2019

 

Can you help me? 

Thanks. I remain to your comments.

Regards

Reply
0 Upvotes
Highlighted
Regular Contributor

How can I do to make the video adapt to the space corresponding to the main banner of the Home in mobile version?

As you can see the video does not cover the space corresponding to what is the main banner:Encabezado_versión_movil_video.PNG

 

In the template in the module HubL Personalized:Plantilla_Home_VideoBanner.jpg

 

 

 I have this code: 

{% text "videolink" label='Enter Background Video Link', value='https://cdn2.hubspot.net/hubfs/491090/iNBest.Cloud-TemplateAlthea/2019/Home/Ejemplos_Videos-Loop/vid...', no_wrapper=True, export_to_template_context=True %}

 <div>

     <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="auto"><source src="{{widget_data.videolink.value}}"> </video></div> 


In which I have added a class and styles to be able to change the size of the height of the video:

{% text "videolink" label='Enter Background Video Link', value='https://cdn2.hubspot.net/hubfs/491090/iNBest.Cloud-TemplateAlthea/2019/Home/Ejemplos_Videos-Loop/vid...', no_wrapper=True, export_to_template_context=True %} 

<div>

    <video class="video-home" muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="auto"><source src="{{widget_data.videolink.value}}"> </video>

<style> 

     @media only screen and (max-width:768px)  {     

         .video-home {    height: 500px ;    }  

</style>

</div> 

 

but it does not change the size of the height of the video but I move the position of the height of the video:Encabezado_versión_movil_video_2.PNG

 

How can I change the height of the video to fit the corresponding space in the mobile video?

 

I remain to your comments.

Thanks and regards.

 

 

 

Reply
0 Upvotes