Full Width Video in Front Page 1 Widget of Aspire

Tagged: aspire theme, Front Page 1 widget, video

This topic has 10 replies, 4 voices, and was last updated 7 years, 9 months ago by Wes.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
July 5, 2016 at 10:30 am #18558
dlstamos
Customer
I am using the Aspire theme. I want to know how to add a video full width that fills in the Front Page 1 widget horizontally below the navigation and how to do the same so it shows through the navigation. Also what is the best size to create the videos we use for this widget.

http://www.learnthesword.universitymartialarts.com/
July 5, 2016 at 4:21 pm #18572
Jason M
Customer
I found this by searching the forum – https://appfinite.com/topic/delete-padding-around-video-on-home-page/ Since this is a customization, there may be CSS adjustments needed on your end.

If the video is full width then it won’t matter what size it is, since it should resize according to your browser.
July 5, 2016 at 5:33 pm #18574
dlstamos
Customer
Thank you, Jason, but that information is for the Ambition Theme.
July 5, 2016 at 9:03 pm #18576
Wes
Moderator
@dlstamos Even though the link @Jason M linked to is for the Ambition theme, it will still work with the Aspire theme. The person on the other thread is using a Full width Video plugin that is specifically designed for these type of situations, so it will work a little better than Youtube videos.

Once you make the same adjustments to your CSS as what I mentioned in the other thread, then you’ll need to add this to cover the video’s width –
```
.front-page-1 iframe {
	width: 100%;
}
```
You’ll also want to maybe increase the width/height of the video in your embed code so it shows up wide enough to stretch to the browser. There are some tutorials available that you can do a Google search for that explains how to make youtube videos responsive and full width. I’d take a look at those and play around with the options until it fits your needs. Example – http://www.labnol.org/internet/youtube-video-background/27933/

Here is what it looks like when I make some of the adjustments I mentioned – http://i.imgur.com/NZgJfeW.jpg
July 5, 2016 at 11:38 pm #18579
dlstamos
Customer
Thank you so much for your help, Wes, but I am not a coder and I am not sure exactly what to change in the CSS since it is different between the two themes.

Also what is the exact name of the plugin you suggest using?
July 6, 2016 at 2:32 am #18581
Mikesoca
Customer
cool sight!

MS
July 7, 2016 at 12:31 pm #18605
Wes
Moderator
@dlstamos The widgets are labeled the same in both themes. You can do a search for the code mentioned in the other thread by pressing command + F (for macs) or control + F (for PC’s) in your style.css file. The code I posted on this thread just needs to be copy/pasted into your CSS.

Is this your own site or are you setting this up for a client?

Also, they are using this for the video – http://videojs.com/ A lot of developers use this plugin for videos including some of the big well known sites.
July 22, 2016 at 4:01 pm #18812
dlstamos
Customer
Wes, I did a search for the CSS you gave me and it does not exist in my Aspire theme’s CSS.
July 23, 2016 at 10:51 am #18824
Wes
Moderator
.front-page-1 is included all throughout the Aspire Theme’s CSS file. Make sure you’re looking at the file labeled style.css. Although I mentioned earlier that you would need to *add* that code I posted earlier since it modifies the front-page-1 widget area. Since you’re now using the front-page-2 widget area, you’ll need to make sure it’s .front-page-2 rather than .front-page-1.
```
.front-page-2 .wrap {
    max-width: 100%;
    padding: 0;
}
```
July 24, 2016 at 10:24 am #18840
dlstamos
Customer
I did find the code in the CSS. I was working on the CSS in Dreamweaver and did a search but with the string slighting wrong. I’m sorry but I’ve been working 20 hour days and am a bit tired.
July 24, 2016 at 10:37 am #18841
Wes
Moderator
No worries 🙂

Let me know if you need anything.
Author

Posts