How to create full width video in the page body area, NOT in the header

Hello community,

I’m setting up my first video and it’s NOT going to be in the header area, which most of the help topics regarding this subject referred to. I just want to put a full width video in the middle of my page, you can see how it looks now here- http://mtmacs.com/web-design/

I uploaded it to YouTube and I also don’t see any “Auto-play” options. How can I get it to play automatically?

2 Questions for you that I would really appreciate knowing the answer to :slight_smile:

Thank you very much!

I tried adding, “?autoplay=1” to the URL, as suggested by others, but that didn’t enable auto-play. I don’t see anything in the YouTube settings for autoplay either.

Also… is there a way to make the video replay itself? I just have a short 1 minute clip and would like to have it replay continuously if possible.

Hello @benjibliss,

You can make it full width by using Full Width Stretched Row Layout option. You can set it in row settings, Layout section.

However, I don’t think that you can achieve autoplay and loop with Sydney: Video widget.

Kind Regards, Roman.

Thank you, Roman.

What will I need to do in order to create the autoplay and loop features? Is there another widget for that? It doesn’t look like there are many options with the Sydney: Video widget.

One other question… how is the video able to be stretched in the header, but not in other parts of the page?

It would seem that if we can format the video to stretch full width in the header then we should be able to do that anywhere else on the page. I know it’s a different widget being used for the header video, but the capability is still there, correct? Even if it needs some custom CSS or coding, I would just like to know asap that is an option.

Thank you!

Couldn’t I use the Site Origin Editor and then enter the Embed Video Code there with custom autoplay and loop commands?

That is the only thing I can think of at this point. I will try that next and let you know how it goes.

The Site Origin Editor works well with this YouTube Player Plugin- https://wordpress.org/plugins/youtube-embed-plus/

It will easily provide the auto-play feature and looping feature as well.

The ONLY issue now… if I choose a background color, the video player meets the top edge at the top, but the bottom does not meet the edge, there is still extra padding. No matter how I adjust the layout padding I can’t seem to get rid of that bottom line of black background coloring. So maddening! What could it be?

How can I decrease that bottom padding under the video to be level with the bottom of the video?

http://mtmacs.com/web-design/

Hello @benjibliss,

That is the bottom margin of <p> element. You can try to remove it in widget or try to use the following CSS code as a workaround (I recommend you to find that <p> element in widget and remove it).

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#panel-322-5-0-0 p {
    margin: 0;
}

Kind Regards, Roman.

How have you been, Roman? I wanted to follow up on your recommendation, I wasn’t able to get the code you gave me to respond at all. I tried the following in both the style.css section and the Customize Additional CSS in the Appearance section:

#panel-322-5-0-0 p {
margin: 0;
}

Regardless, I browsed through the editor and believe that there is likely a default bottom padding that is being assigned that section. I’m NOT using a widget to play my video. I’m just using embed code within a standard Text Widget. So, when using the text widget what is the default bottom margin, or where would we find that default, for anything that is entered into the text widget? I believe that is where the non needed bottom padding is coming from. The bottom padding existed EVEN WHEN I did use either the Sydney Video widget and the Youtube Video Plugin. I’ve got to figure this out, lol. I appreciate your help.

Hello @benjibliss,

I tested previous code on your website with browser tools before posting it here and it worked well. You probably changed something since that time. Anyway, please try to use this CSS code instead of previous:

#panel-322-5-0-0 .textwidget {
    line-height: 0;
}

Kind Regards, Roman.

Thanks, Roman! That code totally worked. I appreciate it :slight_smile:

I didn’t randomly make changes to the style sheet or any defaults, I just checked a few previously and restored them to their default settings. The Sydney theme is epic, I love it so far. Plus, the support is wonderful. You and Kharis are both over-the-top!

Hope you’re having a great weekend,
Benj

Great, you are welcome Benj!

And thank you for the kind words :slight_smile:

Kind Regards, Roman.