• 0

DMS 2 Youtube embed into media box misalignment with adjacent column photos


Question

Posted · Report post

Help, I need to get straight alignment between the three column images on Mac's landing page at the bottom of the page.  The Youtube video embed into the media box "text and HTML" box results in 10 or so pixels below the adjacent column images.  I did a test replacing the Youtube video with a photo of the same resolution and it aligned with the other right photo.  The problem is with the Youtube video.

 

Website URL: http://test.macelectricco.com/
Framework Version: 2.0.4
WordPress Version: 3.9.1
Plugins in Use: JetPack, SFDC web to lead, Akismet, Google Doc Embedder, WP Google Fonts
Server/Host: Godaddy.com
Screenshots: see attached
Details: The About page has a 3 column section below a slider.  The middle box is a Youtube video embed in the media box text section but it will not align with the left and right photos thus making it out of alignment.  I did a test with a photo the same resolution as the left and right boxes and it aligned perfect 600X350 which leads me to believe that a Youtube embed is causing the alignment problem.  I deleted fall back css custom code 

 

Youtube embed: <iframe width="413" height="241" src="//www.youtube.com/embed/SBnrqYbzZOQ" frameborder="0" allowfullscreen></iframe>

 

 

Martin's screencast:

 

http://screencast.com/t/uKE2Wfwqh

 

 I did an inspect on the column but couldn't find the top margin in the div as suggested by Martin. Here is the inspect when I right clicked on the Youtube media box in the center:

 

<span class="ctitle">MediaBox</span>

element.style {
}
 
htmlbodydivspan,appletobjectiframeh1h2h3h4h5,h6pblockquotepreaabbracronym,addressbigcitecodedeldfnem,fontimginskbdqssampsmall,strikestrongsubsupttvarbui,centerdldtddolullifieldset,formlabellegendtablecaptiontbody,tfoottheadtrthtd {
  1. margin0;
  2. padding0;
  3. border0;
  4. outline0;
  5. font-size100%;
  6. vertical-alignbaseline;
  7. backgroundtransparent;
}

  

Share this post


Link to post
Share on other sites

20 answers to this question

  • 0

Posted · Report post

Please can we keep the topics to a minimum - could you update the previous post rather than starting a new topic? 

 

For this one though please see the following screenshot

 

http://screencast.com/t/MScntgHqIj

 

Instead of using the iframe embed method provided by YouTube try and use the pagelines embed method as follows 

[pl_video type="youtube" id="Add video id here, "]   

the id would be SBnrqYbzZOQ

 

This information is in the DMS documentation here http://docs.pagelines.com/tutorials/shortcodes

 

Avoid using iframes where possible within WordPress (WordPress.org )

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin, I didn't want to start a new topic but you asked me to start a new one in your previous post.  "Can you create a new topic for this please rather than add to an answered one and we will take a look," now you just said "Please can we keep the topics to a minimum - could you update the previous post rather than starting a new topic? "  

 

The good news is it is no longer an issue given a design change request by the customer but  THANK YOU for trying to help out.  I will try the Pagelines embed on a different sandbox test site later.

 

Best,

 

Arnold

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

AEP is this issue now resolved ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes. It is resolved for my client because they are now using white backgrounds on adjacent photos and this hides the problem but doesn't fix it.  Martin gave me a work around which I'll need to try out using Pagelines Youtube embed...maybe it will work?  This may be a topic in the future for anyone needing top margin alignment with mediabox photos and a Youtube video in 3 columns.  Thanks for checking in on it!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Would it be possible for you to provide a link to a test page where can I can see your issue please, because using a white background is really just masking the issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That page isn't loading for me?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry...try this...

 

http://wpb2b.com/

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

The top margin gap got a lot better with DMS 2.0.7 and WP 3.9.1...it is about 5 pixels lower than the left and right photos...potentially good enough...yet it would be nice to have all 3 columnsl aligned on the top margin....

 

http://wpb2b.com/

Edited by AEP

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You have a 10.5px top -margin... just remove it with custom CSS, which will be something like:

#mediaboxu0z1yzg {
  margin-top: 0;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Unless there is something wrong my route to that site, I am unable to access that one either.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am in the USA and I can access the link just fine.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

ok thanks!  I'll try:

 

#mediaboxu0z1yzg {
  margin-top: 0;
}
Edited by AEP

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I used this below in custom css and when the page first loads it is at top of margin and 1 second later it drops back to the lower position. 

 

 #mediaboxu0z1yzg {

  margin-top: 0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try 

 #mediaboxu0z1yzg .the-media .fitvids {  
margin-top: 0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Same scenario...it was top of margin and then it dropped about 5 pixels...hey don't worry about it...the customer is happy and I'm good now...but I will be happy to keep working on it...

 

 

Custom LESS/CSS
Custom LESS/CSSTip Hit [Cmd⌘+Return] or [Ctrl+Return] to Preview Live
 
1
#mediaboxu0z1yzg .the-media .fitvids {
2
margin-top: 0;
3
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

AEP I did notice that Martin recommended using the pagelines short code, but you have used iframe. I would if that might be as issue. I have to be honest, I could not replicate you issue (dropping down after adding custom css)

 

One alternative would be to use a PL Next box with the options Render Shortcodes (if using the pagelines video shortcode) and Remove DMS Padding both checked

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks GetMeWebDesign!  I'll give it a go.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I just went to the site and the Youtube video box still drops 4-5 pixels after loading.  I'm using Chrome to view it.  I just tried Firefox and IE...same result.  

 

http://wpb2b.com/

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