Joomla Templates Club 406,261 posts

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#197175

Hi all-

I’m really liking this new template – VERY nice work. I’m thinking of using this to redo our own website. So the Video Background section… can this be used to do a video background in the header of the site? So upon “play”, you see the video only in the top header with the text overlaid on top.

It would be absolutely fantastic if a video can play in the background of the top header. This would set this template above the rest. Is this possible? If so, could you please let me know how?

Thanks!
Kevin

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#532780

Hey Kevin:

My initial thought is that you cannot use the video background module as a background for your header … not easily anyway … as it would involve having to code in your logo and top navigation items as well.

I’m not going to say it can’t be done . . . but I don’t believe it’s a “point-and-click” type of effort.

Nevertheless, it’s an interesting question and I will forward it onto the JA Development Team for further review and comment.

😎

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#532783

Hey Tom-

Thanks for the quick response. I feel like video backgrounds are a huge trend right now (http://www.hongkiat.com/blog/fullsize-video-background-websites/), and if JA could pull this off, it would definitely be a huge win for your team.

I understand it may not be a current out-of-box setting, but it also seems like it wouldn’t be terribly difficult from the image background. An image is just HTML, and the logo/ nav is stored separately from that HTML, and overlaid on top. I’m thinking the video would be treated the same way, however I also don’t want to over simplify something more complex than that.

I’m happy to make this a reality for myself and others. PM me, and I can throw a few development dollars your way if that would help, and I’m also happy to provide a QA resource to help with any testing. Then, it would be available for the rest of your customers as well. That’s the joy of open source, right? 🙂

Looking forward to hearing any more thoughts.

Thanks!
Kevin

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#532804

@kjlarski,
You can try steps below to have a video background in the top header:

1) Disable JA Slideshow module in backend
2) Create a custom html module as follows:

Output:


<div class="video-shuffle-wrap">
<div class="video-shuffle" data-js-view="video-shuffle">
<div class="mask"> </div>
<video loop autoplay style="width: 100%; height: auto;" poster="images/stories/joomla/poster.png">
<source src="http://static.joomlart.com/video/ja_appolio/welcome.mp4" type="video/mp4" />
<source src="images/stories/joomla/welcome.webmhd.webm" type="video/webm" />
<div class="video-fallback" style="padding-bottom: 56.25%">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%" >
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http://static.joomlart.com/video/ja_appolio/welcome.mp4','autoPlay':true, 'controls': null}]}" />
<img alt="Sample Video" src="images/stories/joomla/poster.png" width="100%" height="auto" title="No video playback capabilities, please download the video below" />
</object>
</div>
</video>
</div>
</div>


Module title: Video Background

Module Postion: slideshow

Menu Assignment: Home page

Status: Published

Show Title: Hide

3) Create the file: templatesja_sugitecsscustom.css and add following css rule:


.has-slideshow .t3-header {
background: #292929
}

.ja-slideshow {
background: none;
}


[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#532929

Hi there-

Wow – thanks so much for the detailed response. That’s extremely appreciated.

So I did what you said, and it is in fact working. However, it looks like the mp4 file is taking several minutes before it appears. Can you please check out http://www.socialraise.com/srnew/

Any thoughts?

Best,
Kevin

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#532933

I tested with a couple other videos, and I think the delay is mainly due to the video. However, still seeing a lot of cross-browser issues. I understand this request is out of the normal scope of support, but do you think this may be something you’ll look at implementing in the future?

Thanks again,
Kevin

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#533227

@kjlarski, in JA Sugite version 1.0.1 will have “Home Page 2” with video background section, fun fact section… please wait for few days.

2 users say Thank You to Css Magician for this useful post

1. kjlarski
2. John Wesley Brett

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#533305

Wow – this is very exciting! Let me know if there’s anything I can do to help test. Happy to put it through some cross-browser testing.

Looking forward to this new feature! 😀

Best,
Kevin

1 user says Thank You to kjlarski for this useful post

1. Css Magician

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#534593

@kjlarski, just let you know we have released JA Sugite 1.1.0 with some features and video background section. You can check out here

1 user says Thank You to Css Magician for this useful post

1. pittigeteksten

[pferrol Friend pferrolJoin date: September 2014Posts: 59Downloads:41Uploads:4 Thanks: 6 Thanked: 2 times in 1 posts]

#535119

I download the last version but i don´t see the video background section. Can you help me?

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#535272

@pferrol, can you check again? The section in this page http://ja-sugite.demo.joomlart.com/index.php/en/bonus-pages/features-intro

[Author]

Posts