Jump to content

Archived

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

chuckrose1

Video Background: odd cropping on pageLoad

Recommended Posts

chuckrose1

I am using a MP4 video as the background in a Canvas Area. In Chrome, on pageLoad, the top of the video is placed approx. 50% from the top of the container. If you resize the browser by as much as 1 px, the problem resolves and the video displays normally.

 

I have turned off all plug ins, but still have the same issue.

 

I have also tried all the options for scrolling effects and sizing to no avail.

 

I removed this from my client site, http://www.adsperity.com, but have set up the same situation, with the same results, on a different server. You can find it here:

http://www.chuckrose1.com/wordpress

 

Any ideas on what is causing this and how to resolve it?

 

Please find the attached screen shot and particulars below.

 

Website URL: http://www.chuckrose1.com/wordpress
Framework Version: DMS 2
WordPress Version: 4
Plugins in Use: All have been turned off.
Server/Host: 
Screenshots: See attached
Details: See above


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Can you please update to the latest version of DMS, as we can not provide support to users running out of date versions.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

I am running DMS 2.1.5. And i have the updater installed. What version should I be running?


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

The latest version 2.1.6.1


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

 I am using the updater plugin. I thought that was supposed to always keep me up to date.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
chuckrose1

I am using the updater plugin and running the latest version. Can you please look at the issue now?


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
chuckrose1

Can you respond to this today please?

 


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

Can you follow the instructions of the of adding the RevSlider and add both a .ogv and .mp4 file, at the moment you have two .ogv files. If you do as I suggest does this resolve your issue?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

The double .ogv files was an oversight on my part when I set up this test site. On the client site, was using both the .mp4 and ,ogv. I have corrected that on this test site. (chuckrose1.com/wordpress. I am getting the same results. Can you explain whey I should use a revslider? I don't want to use a slide show of photos. Also, there are no instructions for setting up a rev slider. When placed on the page successfully, it says it is installed successfully, now just set it up! But the link just takes you to the Pagelines home page. There are no instructions.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
chuckrose1

I installed the rev slider, and added one .png file that I want overlaid on the background video. However, the revslider makes the .png full screen with no way to reduce the size. But the video background is loading correctly. Why doesn't it work as the background of a Canvas Area container with a Mediabox placed inside it?


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

I apologise, but I am confused now. Are you having the issue with the RevSlider section or the Canvas area or are you stating that the issue is in the RevSlider section, but when you do the same thing in the Canvas section it works just fine ?

If you can go into greater detail, as to how you're creating the error and screenshots of your settings used, so I can try and recreate the issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

Hey Danny,

In the first post you will see that I am having this issue with a Canvas Area. You brought up the rev slider a few posts back. 

 

I am trying to use a video background in a Canvas Area. I have placed a Media Box within that.   When the page loads the video gets cropped in a strange way (see screen shots in the original post.

 

When you resize the browser by at least one pixel, the video corrects itself. But that is not the desired UX.

 

I placed the Rev slider below it, that you suggested, but that is not what I want to use.

 

You can find my test page here: http://chuckrose1.com/wordpress/

 

I have attached my settings in the form of a screen shot.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

If you remove the MediaBox so that you only have the Canvas area and in the Canvas Area settings, set a min-height of 400px, so the issue persists ? As I am unable to recreate your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

Chuck,

 

I encountered something similar and after snooping around, found something that fixed it by eventually using this CSS, playing around with the parameters until it worked. The results vary depending on the browser, that's why the multiple versions may be needed:

 

.bg-video {
transform: translate(0,0%);
-moz-transform: scaley(1.2) translate(0,5%);
-webkit-transform: translate(0,0%);
-ms-transform: scaley(1.2) translate(0,5%);
}

Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

Thanks Claude, but this shouldn't be happening to begin with. Can you go into detail of what you did to create the issue, as I am unable to do so.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

Thanks for trying Claude. But it did not resolve the issue. I'm not sure why this is happening. 

 

I did what you suggested too Danny.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
chuckrose1

I also noticed that even though I have a MP4 and and OGV file loaded, the video does not play on an iPhone or an ipad. I used Adobe Media Encoder to create the MP4. I have it rendering H.264 for iPad 2,3,4, Mini, iPhone 4S, 5, 5S.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Claude203

Chuck, I noticed from some Google searching that there are some special CSS commands that can be used to define a separate CSS set to govern mobile devices, that can be placed at the end of the existing CSS file or in a separate file/location. I have not gotten to that yet, but that is how I will handle the mobile related issues like fonts or images that are too large, etc. Maybe video is governed like that too.

 

Danny, basically for me I use a Canvas Area section into which I dropped a MediaBox and a Text Box. In the Canvas Area, I placed a background video (mp4) and an alternate for Firefox (ogv) and they both run fine after eventually loading. (Their optimized size is a separate issue with which I would like some help but that's another story.) But I had to fiddle around with CSS transform commands to get the video to be adjusted properly because its top edge was not aligned with the top edge of the Canvas Area; it was either too far up or too far down. Also, its X scale was off. So I had to use the translate and scale to get it just right. However, even that nudging varies slightly from Chrome to Firefox. Not sure about IE but probably off there too. So that's why the multiple webkits were needed.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

chuckrose1 - I have no experience with Adobe Media Encoder, I personally use HandBrake. I will look into the videos not playing on iPhone/iPad and report it as a bug, if I can recreate it.

 

Claude203 - The Canvas area uses the CSS property background-size and the value cover to fit the video to the container. However, this means that some of your video may be not be visible as it has been sized to fit the Canvas area. Also please be aware, that -webkit styles will only effect Google Chrome and Safari and will not effect IE or FireFox as they use a different browser engine.

 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

Thanks for the help guys. Danny, I have used Handbrake in the past, but have been using Media Encoder lately. However, that may have been part of the issue. I recompressed the video with Handbrake and the cropping issue went away. Awesome.

 

Unfortunately, the video still doesn't play on mobile or tablet. I am using Wondershare Video Converter to make the OGV files. What are you guys using?

 

And Claude, thanks for jumping in and helping me figure this our. Much appreciated.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Danny

chuckrose1 - The video not displaying on mobile devices is actually a bug in my opinion and I have already reported it to our tracker.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chuckrose1

Thanks Danny. What's the best way to stay plugged in to a resolution to this?


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites
Claude203

Speaking of videos, just to mention it, I used FinalCut Pro to create a .mov file, then I used MPEG StreamClip to create the .mp4 file, and then I changed the dimensions/cropping of the video frame to fit the header using Compressor, which is kinda like a FinalCut plugin by Apple. Then I used the Miro video converter to create an ogv file from that.

 

Nevertheless, I too am not seeing video on my iPhone, which is the only mobile platform I tested.

 

Finally, realizing that this may require a new topic submission, I would like some help with adding the necessary CSS to make DMS2 appear properly on mobile devices. I've tried the JetPack feature, which does not work. I've searched online and found examples, but so far have not succeeded. Do you have any advice or suggestions?

 

Thank you.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Claude203

PS – Chuck, I stay connected by just using the button at the top right that says "Follow This Topic." It works pretty well but I sometimes get two emails for each reply.

 

Oops I see you are already following! Nevermind! :-)


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
chuckrose1

Thanks Claude. Doing that already, so I guess I'm set. In the meantime. The image I load into "background image is getting served up to mobile devices, so at least it degrades gracefully.


Chuck Rose

VP, Design & Development

Ballantine Communications, Inc.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • jagipson
      By jagipson+
      We had this site on our cloud 9 server and moved it to a Amazon Web Service server using Cloud Front and now the Editor on chrome is missing just says USE GOOGLE CHROME TO EDIT WITH DMS. Have tried multiple computers and same results. Any solutions why we would be have this problem?  Won't work on any page.
      http://www.viaglobalgroup.com/
      Thanks
       
      Matt
      @Danny @Andrew 

    • pehja
      By pehja+
      https://pehjaproduction.se/webbdesign/  Video is not showing up in Journey section. Why? I have entered this in the settings 
       
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
×