Jump to content
Sign in to follow this  

Feature text/content obscures video embed on resize w/responsive settings

Recommended Posts


Hello- Really enjoying the framework but still getting accustomed to the way in which it is configured, please bear w/me;)


I have embedded a YouTube video in a feature and want Call To Action content floated right of the video. When resized to mobile-browser width, either the content flows vertically outside of the container or the header and text content reflows after the sub-320px breakpoint (as it should) and then obscures the video. This content represents the main call to action on the homepage and I don't see any way to rectify this except leaving the video in the feature and moving the text content into an element below the features but above the boxes. 


Any ideas or how I can add a full-width container in-between the features and boxes so the call to action is available at all widths? I tried the drag N drop to add a container but ran into a dead-end. It also appears that I must have a feature title which will flow over the video. I know I can set it to "No-Title" and just show a background image but I am using a video so that won't work.

Thanks in advance



Share this post

Link to post
Share on other sites
James B

Hi there,


The feature slider will have it's own css set for the overlay/text which will change depending if on the desktop or in a mobile view (if set to responsive). Ff you make changes to the desktop version then you will also need to edit the css for the mobile layout to tweak it.


You can do this using browser specific css, which we have a plugin for. http://www.pagelines.com/store/plugins/browser-css/ following the instructions and classes here - http://support.pagelines.me/docs/plugins/browser-specific-css/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thanks James - If I understand correctly, the only way to override the default behavior and keep the required feature-title header element from overlapping a video embed at mobile browser widths is to edit the desktop and mobile stylesheets or use the browser-specific plug-in to target browsers individually?


If I update the PageLines framework down the road, will these CSS changes be overwritten?



Share this post

Link to post
Share on other sites

Hi, to answer your first question, yes, but I recommend the plugin. 


To answer the second question, the CSS should be written to either a child theme, the PageLines Customize plugin or, to the CSS area of Dashboard > PageLines > Site Options > Custom Code. In any of these locations, custom CSS will not be overwritten, even if you upgrade PageLines Framework.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • 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.
    • crose
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • Matt C.
      By Matt C.+
      So I used to use the Video Background extension that was offered here on pagelines, but until recently it continued to function.  Yesterday however it ceased to work and since it has been removed and no longer supported I've been forced to find a new way to show the youtube video that used to be on my background.
      I know that there is the option to upload videos for background, needing both an mp4 and ogv version.  However, since this is a youtube video I don't have any source files to upload.
      I have since turned to using the mb.YTPlayer wordpress plugin.  It seems to be working just fine on its part, as you can see a sliver of it playing just below my footer.  My issue though it that it doesn't show up behind my main body content.  Now it was my understanding that the backgrounds were defaulted to transparent in DMS2 and that this shouldn't be happening.  I've tried several CSS transparency codes to no avail, so my question is how am I able to get the video that is showing up right beneath the footer in other areas?  Either on a section by section basis or for the entire body?
    • clj182
      By clj182+
      I'm having trouble getting my Powerloop layout the way that I want...
      I'd like to have the same layout as the question below but instead of an image I'm using video.
      I have my media shortcode above everything but the title is still above it in my page and when I inspect it.
      My settings:
      [powerloop_title class="plHtxt" align="center"] 
      [powerloop_content class="plHContent" align="left"]
      [powerloop_author class="plHauthor" align="left"] | [powerloop_date format="F j, Y"]
      Another problem I am having is that I cant create space between the video and the content..If i add padding or an margin to my content class it adds that spacing to the video as well.
      Any ideas on how I can fix this?