Jump to content

Archived

This topic is now archived and is closed to further replies.

Aires

Splash Up video BG on mobile

Recommended Posts

Aires

Looks good at landscape and not so good portrait.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
chrisayers

I am seeing this throughout. The video lays overtop the image with a play button mobile. I do like not having to use an mp4 and ogv file now though. Mobile should hide the video layer though.

Share this post


Link to post
Share on other sites
Andrew

can you post a screenshot of what you're seeing guys?

Share this post


Link to post
Share on other sites
Andrew

ok can you guys email me on of the videos you're using? i'll clean up this experience.

Share this post


Link to post
Share on other sites
chrisayers

ok can you guys email me on of the videos you're using? i'll clean up this experience.

You can pull the scientist mp4 from here. http://drbrig.richestweb.com/wp-content/uploads/2015/10/scientists-with-tablet-pc-and-microscope-in-lab_vklffwyr__D.mp4 This is happening anywhere a video is used as a background not just splash up. You can put the static image in and tell it cover and that works fine but video layer displays contain and really not ready for mobile yet so probably needs to be a global hide function.

Share this post


Link to post
Share on other sites
Andrew

So i think on mobile we're just gonna hide HTML5 video backgrounds.. Your standard background image or color will then show up. Sound good?

Share this post


Link to post
Share on other sites
Gavin_

Would it be possible to have the video using the approach these guys take - check code at foot of page.
http://www.coverr.co/

 

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden">
            <img src="PATH_TO_JPEG" alt="">
        </div>
    </div>
</div>

 

Share this post


Link to post
Share on other sites
Jackey

I would like the video to act the same as the placeholder, i.e. cover when cover is selected, and contain when contain is selected. (or is that not possible)

That way the placeholder shows immediately and the transition to video is seamless.

And hide the video on devices that can't handle video (maybe like gavin suggests).

Now it looks weird on all devices: http://melisgs.nl/video-test/

BTW: don't we need the .ogv anymore?

Share this post


Link to post
Share on other sites
Gavin_

yeah really there should be 
MP4
OGV 
Jpeg fall back 

Share this post


Link to post
Share on other sites
Jackey

On top of that... I think the video should not even load on mobile! (so not just hidden)

It's a challenge!

Share this post


Link to post
Share on other sites
Andrew

I dont think we need to use webm anymore... look at this: 

http://caniuse.com/#feat=mpeg4

As for the fallback image, that will be the image you set as the background for the section. I can tweak this for mobile.

Share this post


Link to post
Share on other sites
Jackey

I dont think we need to use webm anymore... look at this: 

http://caniuse.com/#feat=mpeg4

As for the fallback image, that will be the image you set as the background for the section. I can tweak this for mobile.

Agree re the ogv

The fallback image indeed is the image you set as the background... but it would be nice if dimensions, placement and cropping is the same for the video as the background image.

Share this post


Link to post
Share on other sites
Jackey

I tried this (the aspect of the video needs to be 16:9:)

#splashup_u586a8b9 .pl-bg-video-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#splashup_u586a8b9 .pl-bg-video {
  height: auto;
  min-width: none;
  min-height: none;
  max-width: none;
  max-height: none;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-height: 56.25vw; /* 100 * 9 / 16 */
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

result: http://melisgs.nl/video-test/

Share this post


Link to post
Share on other sites
Simon

^^ that looks good!

Share this post


Link to post
Share on other sites
Jackey

Did not know it was that hard to position a video without knowing its dimensions.

Share this post


Link to post
Share on other sites
Jackey

It might require some JS to do it perfect....

Share this post


Link to post
Share on other sites
chrisayers

Nice job Jackey! I generally aways use 1080 video for backgrounds since that is what most people shoot at now. I also pay for a video blocks membership to use their stock.

Share this post


Link to post
Share on other sites
Jackey

So the aspect is okay. Thanks for the tip... think I consider a membership as well.

Share this post


Link to post
Share on other sites
Jackey

Cleaned it up a bit: 

.pl-bg-video {
  height: auto;
  max-width: none;
  max-height: none;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-height: 56.25vw; /* 100 * 9 / 16 */
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate3d(-50%, -50%, 0); /* % of current element */
}

 

Share this post


Link to post
Share on other sites
Aires

Awesome job @Jackey 

This should be included it works well.

Should be an option for the user to select whether they would like the video to be shown on mobile devices or an image.

Some may not like the video.

But I do but that's just me. 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

×