Forum Support

Shape 5
March 28, 2024, 10:18:49 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Video in Custom_2  (Read 497 times)
Gutshot
Jr. Member
**
Offline Offline

Posts: 489



« on: November 01, 2015, 05:23:29 PM »

Hello,

I placed a videoloop in position "custom_2"and it looks really good.

Using this code:
Quote
<div class="video_overlay_wrap video_large" style="max-height: 700px; min-height: 400px; background: url('/xxxxx/xxxxx.jpg');" data-sr="scale up 2%, over 0.5s, wait 0.8s">
<video src="images/xxxx.mp4" autoplay="autoplay" loop="loop" muted="" type="video/mp4"></video>
<div class="video_overlay_text_wrap"><span class="iacf_text iacf_centered"> <span class="iacf_title">
<span style="color: #ffffff;"><span class="highlight1">xxxxxxxxx</span>some text</span></span>
<a href="#" class="readon">XXXX[/url]
</span></div>
</div>

But I hear not all devices support mp4, how to fallback to html5 video or other formats ? 

I can use a 3rd party extension but that is the last thing I want to do.

Kind regards,
« Last Edit: November 01, 2015, 05:26:18 PM by Gutshot » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: November 02, 2015, 08:05:16 AM »

Hello,

Most devices support mp4, but most do not support automatic playing; usually tablets and mobile. I would recommend hiding the video element at specific screen width, so that the background image shows instead of the video. By default "video_overlay_wrap" should already be doing that.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Gutshot
Jr. Member
**
Offline Offline

Posts: 489



« Reply #2 on: November 02, 2015, 08:24:50 AM »

Ok Mike Thx.

 I can add that in the code above? Lets's say tablet view and below.. my friend said he got a black screen on his samsung tablet.

Can you give an example what to add or edit in the code ?

I find it quite odd he can't see anything, on my Ipad 3 it works perfect.. the image is visible and good in place. So here it works as it should.

Kind regards,
« Last Edit: November 02, 2015, 08:35:36 AM by Gutshot » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: November 02, 2015, 08:34:00 AM »

Hello,

The video overlay code us given here, just use the exact same layout and configuration shown:

http://www.shape5.com/demo/fitness_center/index.php/features-mainmenu-47/continued-vertex-features/typography

The video itself hides at 1024px, and then the background image shows. This is defined in editor.css:

@media screen and (max-width: 1024px){
.video_overlay_wrap video {
display:none;
}
}

If he's getting a black screen either the code is not setup properly or the image url is incorrect.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Gutshot
Jr. Member
**
Offline Offline

Posts: 489



« Reply #4 on: November 02, 2015, 08:40:52 AM »

Yes, my conclusion also,

I was editing my post while you replied  Grin   On my Ipad it works as it should.

Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.