Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1358262

    Hello!

    We’ve only been using the theme for a short time, but we are loving the features that it has. One of the things that we are currently struggling with, however, is creating a fullwidth video. We tried using the example here but found that when we added our video to the video element via our media library it would just be a black screen. Using a color section with the video as a background video also caused the same result (although, I’m not sure we’d want to go that route as there would be video control functionality).

    We finally coded our video into the site and added some CSS, but now the video has a white border around it. How do we go about removing that border so that it looks seamless with our other content?

    Thank you very much!

    `<video poster=”image.jpg” controls preload=”none”>
    <source src=”video.m4v” type=”video/mp4″>
    Your browser does not support the video tag.
    </video>

    /* Fullwidth Video */
    #fullVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: 0;
    margin-right: 0;
    }

    #1358274

    Hey TippingPointSolutions,
    Please link to your example page so we can examine. If you want the video to be 100% height and width try using the Fullscreen Slider you can add videos to it.

    Best regards,
    Mike

    #1358368

    Hello, Mike! Thanks for the response.

    Here is a link to the site: https://conectadolaunch.wpcomstaging.com/landing/

    I forgot to mention, that we actually tried the Fullscreen Slider as well, but couldn’t get it to work. It fills the space and looks great (especially with the fallback image set), but the video won’t play. The controls aren’t hidden, and I even left the video on auto-play (even though we don’t want that).

    Any help would be greatly appreciated!

    #1358380

    Hi,
    Thanks for the link to your page, the padding around your video is coming from the grid cell that the video is in, please check and remove the 30px padding, or try this css:

    #top.home #av-layout-grid-2 .flex_cell {
    	padding: 0;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1358386

    Ohhhh…I feel silly. I didn’t read the fine print and left the value as default (assuming it was zero). Thank you for your help, sir!

    #1358388

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Fulldwidth Video, No Border’ is closed to new replies.