Youtube player embed problem

2 Posts

russlander Reply #1, 12 years, 11 months ago

Hi guys, sorry to be a pain!

First ever post here (Yes I looked at the other threads before asking)

I am trying to put a second YouTube video on the home page of my website. I am able to do this underneath the first one, but forgive my semantics I wish to put it along side of it (to the right...or left). I have spoken to a friend of mine (who has more coding experience than me) who has told me I need to put a html box in and/or table.

However, I am editing this home page from a "chunk" and I do not want to completely mess up the look of the home-page.

1) Is it possible to put the video next to the other?
2) If so how how is a HTML box to make?
3) Is there anyone who may have a link to some helpful resources for this please? (Yes i have been googling for around 4 hours now)

Any advice/replys will be very much appreciated, thanks.

Russell.

32 Posts

Garret Overstreet Reply #2, 12 years, 11 months ago

It's hard to say yes or no since there's no link or code here. If the video will fit, you need to use basic HTML markup in your chunk and apply CSS to align them side-by-side. This isn't much of a MODX thing as much as an HTML thing.

HTML

<div class="wrapper">
  <div class="videoBox">
    <iframe src="//www.youtube.com/embed/D36JUfE1oYk"></iframe>
  </div>
  <div class="videoBox">
    <iframe src="//www.youtube.com/embed/D36JUfE1oYk"></iframe>
  </div>
  <div class="clearfix"></div>
</div>

CSS

.videoBox {
    display:block;
    width:40%;
    float:left;
}
.clearfix {
    display:block;
    clear:both;
}

Here's a little more info to help explain. http://www.barelyfitz.com/screencast/html-training/css/positioning/

Garret Overstreet
Business and Marketing Consultant

2 Posts

russlander Reply #3, 12 years, 10 months ago

I will try this tomorrow as I only just got it. Thanks a lot though Garret for replying, I will let you know how I get on!

Thank you,

Russell.

953 Posts

iusemodx Reply #4, 12 years, 10 months ago

A fast uncomplicated easy to use solution using inline styling and one extra element - the clearing DIV

Using "IFRAME":

<iframe style="float:left; margin-right:10px;" src="http://www.youtube.com/embed/D36JUfE1oYk?modestbranding=1&amp;showinfo=0&amp;vq=hd1080&amp;rel=0&amp;wmode=transparent"></iframe>
<iframe style="float:left;" src="http://www.youtube.com/embed/D36JUfE1oYk?modestbranding=1&amp;showinfo=0&amp;vq=hd1080&amp;rel=0&amp;wmode=transparent"></iframe>
<div style="clear:both;"></div>

And basically the same using "OBJECT":

<object style="float:left; margin-right:10px;" data="http://www.youtube.com/embed/D36JUfE1oYk?modestbranding=1&amp;showinfo=0&amp;vq=hd1080&amp;rel=0&amp;wmode=transparent"></object>
<object style="float:left;" data="http://www.youtube.com/embed/D36JUfE1oYk?modestbranding=1&amp;showinfo=0&amp;vq=hd1080&amp;rel=0&amp;wmode=transparent"></object>
<div style="clear:both;"></div>

In both of the above:
Both videos are floated left - the first video has a margin to push the second video 10px to the right.

The "DIV" is used to clear the floating elements to ensure that the videos don't interrupt the content flow.

General info:
Extra link info added "?modestbranding=1&showinfo=0&vq=hd1080&rel=0&wmode=transparent"

Modestbranding
Showinfo
Rel
VQ = presets best HD quality available, in this case 1080
Wmode = helps fix overlay and Z-Index Issues [ed. note: iusemodx last edited this post 12 years, 10 months ago.]

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

953 Posts

iusemodx Reply #5, 12 years, 10 months ago

Further variations (more complicated) that you could try out.

SOLUTION 2:

HTML:

<div class="videowrapper">
  <iframe src="http://www.youtube.com/embed/D36JUfE1oYk"></iframe>
  <iframe src="http://www.youtube.com/embed/D36JUfE1oYk"></iframe>
</div>

CSS:

.videowrapper{display:block; margin:0; padding:0;}
.videowrapper:before, .videowrapper:after{content:" "; display:table;}
.videowrapper:after{clear:both;}
.videowrapper iframe{float:left; margin:0; padding:0;}
.videowrapper iframe:first-child{margin-right:10px;}

SOLUTION 3:

This solution may interfere with your current CSS coding, due to the class "clear"

HTML:

<div class="videowrapper">
  <iframe src="http://www.youtube.com/embed/D36JUfE1oYk"></iframe>
  <iframe src="http://www.youtube.com/embed/D36JUfE1oYk"></iframe>
  <div class="clear"></div>
</div>

CSS:

.videowrapper{display:block; margin:0; padding:0;}
.videowrapper iframe{float:left; margin:0; padding:0;}
.videowrapper iframe:first-child{margin-right:10px;}
.clear:before, .clear:after{content:" "; display:table;}
.clear:after{clear:both;}

All of the variations (shown in all answers / replies) will work, it all depends on how complex or uncomplicated you want to make things - the choice is yours

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation