Video in Header - Support | Kriesi.at - Premium WordPress Themes

How can I create a home page top area with video, like the one attached. And it looks good on mobile view.

January 24, 2025 at 5:35 am #1475699

Hey bemodesign,

Thank you for the inquiry.

You can use a Video element placed within a Column element. Make sure it is muted if you want it to play automatically.

Best regards,
Ismael

January 24, 2025 at 5:51 am #1475703

I get how to do that, but it just make a floating video with a frame edge all around it. The one on this page is responsive and bottom/right-justified. And the video is in a shape, not just rectangle. And on mobile view, it is a bigger video below the headlines. Any ideas on how this is done?

January 24, 2025 at 6:48 am #1475710

Hi,

Thank you for the update.

You can apply a large top-left border radius to the column element and position it relative to the parent container. Please create a test page, add a Color Section, insert two 1/2 Column elements inside the section, add Text or Special Heading in the first column and Video in the second. Then we’ll provide you with the modifications needed to create the shape and adjust the position of the video.

Best regards,
Ismael

January 24, 2025 at 9:17 am #1475719

Guenni007

So now not only your own websites that you create for your customers are secret (which I can understand), but also an example page that you find on the public Internet?

January 25, 2025 at 11:26 pm #1475797

Ok, I set this up on this page. It tried the border radius and it didn’t work. the main thing I want is to have the video fill the mobile screen(is it responsive?) and be bottom justified, like the sample page screenshot. And I added my webpage and login. thanks!

January 26, 2025 at 8:00 am #1475803

Guenni007

Dear @bemodesign, like you, I am just a fellow participant here, but I am happy to help where a solution might be interesting.
I have no idea why publicly accessible pages – your example page you mention above – are not allowed to be mentioned here. If this is exactly what you want to use as a realisation for your site. This limits you to solutions from moderators only. So I am no longer involved in the process of finding a solution.

January 26, 2025 at 7:15 pm #1475834

Sorry about that. I thought we were supposed to put any links to site in that area. here it is:

screenshot: https://img.savvyify.com/image/Screenshot-2025-01-25-at-3.21.13%E2%80%AFPM.9pvxl

Mobile view webpage: https://priverproducts.com/freeze-flat/

January 27, 2025 at 5:46 am #1475837

Hi,

Thank you for the update.

We applied the following class names to the Advanced > Developer Settings > Custom CSS Class field:

color section – av-custom-product-video
first column – av-custom-product-video-column-1
second column – av-custom-product-video-column-2

Then added this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av-custom-product-video .container {
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

.responsive #top #wrap_all .av-custom-product-video .template-page {
    padding: 0;
}

  .responsive #top #wrap_all .av-custom-product-video .template-page .entry-content-wrapper {
    padding-right: 0;
  }

  .responsive #top #wrap_all .av-custom-product-video .av-custom-product-video-column-2 {
    margin-bottom: -20px;
  }
}

Result:

View post on imgur.com

Please make sure to purge the cache before checking.

Best regards,
Ismael

January 27, 2025 at 6:29 pm #1475876

Guenni007

have a look at : https://webers-testseite.de/bemopriv/
the heading had to be styled for responsive case – but I didn’t feel like doing that anymore.

the layout is based on a grid-row element

this is the enfold shortcode of the grid-row:

[av_layout_row min_height_percent='percent' min_height_pc='60' min_height='0' border='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' mobile='av-flex-cells' mobile_breaking='' mobile_column_order='' id='' custom_class='full-bg-image' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-m6f9v8gq' sc_version='1.0']
[av_cell_three_fourth vertical_align='middle' padding=',,,' av-desktop-padding=',,,80px' av-medium-padding=',,,80px' av-small-padding='3' av-small-padding_sync='true' av-mini-padding='20' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-m6f9ukqb' sc_version='1.0']

[av_four_fifth first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='1' border_style='solid' border_color='#000000' radius='15' radius_sync='true' min_col_height='' padding='30' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='rgba(0,0,0,0.5)' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' src_dynamic='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' fold_timer='' z_index_fold='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' link='' link_dynamic='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_uid='av-t574on' sc_version='1.0']

[av_heading heading='FREEZE FLAT™' tag='h1' style='blockquote modern-quote' subheading_active='subheading_above' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='48' av-medium-font-size-title='42' av-small-font-size-title='36' av-mini-font-size-title='28' subheading_size='' av-desktop-font-size='36' av-medium-font-size='28' av-small-font-size='24' av-mini-font-size='20' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_dynamic='' link_target='' title_attr='' id='' custom_class='iceglas' template_class='' element_template='' one_element_template='' av_uid='av-m6e7xj5g' sc_version='1.0' admin_preview_bg='']
The Original
[/av_heading]

[/av_four_fifth][/av_cell_three_fourth][av_cell_one_fourth vertical_align='bottom' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-u4sunr' sc_version='1.0']

[av_video src='https://www.youtube.com/watch?v=W73GdyDSHuU' mobile_image='https://webers-testseite.de/wp-content/uploads/dynamic_avia/avia_video_thumbnails/youtube/W73GdyDSHuU/W73GdyDSHuU.jpg' attachment='49853' attachment_size='full' video_autoplay_enabled='aviaTBvideo_autoplay_enabled' html5_fullscreen='aviaTBhtml5_fullscreen' format='16-9' width='16' height='9' conditional_play='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m6f9u95o' sc_version='1.0']

[/av_cell_one_fourth]
[/av_layout_row]

January 28, 2025 at 1:03 am #1475891

Thanks! These are great options!

January 28, 2025 at 6:34 am #1475898