How do I get 3 YouTube videos side by side?

• 

  metamorafilms · Member · Mar 4, 2015 at 7:11 pm

  • Copy link
  • Add topic to favorites

  I’ve looked at various codes on this forum but nothing seems to work for me. Currently I’m using this code but it still stacks the YouTube videos on top of each other. I would like 3 videos side by side.

  http://mattduhamel.metamorafilms.org/portfolio/

  <div style=”float:left;width:auto;margin-right:14px;”>
  [youtube=https://www.youtube.com/watch?v=W5eVoDoZugU HERE&w=60]
  </div>
  <div style=”float:left;width:auto;”>
  [youtube=https://www.youtube.com/watch?v=SuKmuKbDjh4 HERE&w=60]
  </div>
  <div style=”clear:both;height:1em;”></div>

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Mar 4, 2015 at 11:33 pm

  • Copy link

  Be mindful of your maximum displayed image width in the post or page area. The main column width is 680.
  https://theme.wordpress.com/themes/port/

  Then adjust the video width attributes so that they are so small that they will fit side-by-side https://en.support.wordpress.com/videos/youtube/#video-customization-options

• 

  timethief · Member · Mar 4, 2015 at 11:43 pm

  • Copy link

  re: full page templates.
  The main column width is 680 and the sidebar width is 266 for a total width of 946. So divide by the number of videos and take some space between them into account when adjusting your width attributes.

• 

  metamorafilms · Member · Mar 4, 2015 at 11:50 pm

  • Copy link

  I have but no still the videos refuse to be side by side….current code:
  http://mattduhamel.metamorafilms.org/portfolio/

  <div style=”float:left;width:auto;margin-right:14px;”>
  [youtube=https://www.youtube.com/watch?v=W5eVoDoZugU&w=320&h=192 HERE&w=60]
  </div>
  <div style=”float:left;width:auto;”>
  [youtube=https://www.youtube.com/watch?v=SuKmuKbDjh4&w=320&h=192 HERE&w=60]
  </div>
  <div style=”clear:both;height:1em;”></div>