Reduce YouTube video's size on homepage

• 

  firebrandnotes · Member · Oct 19, 2015 at 1:56 pm

  • Copy link
  • Add topic to favorites

  Hi!

  Please could someone drop me a quick reply with the code necessary to reduce my home page’s featured video by 50%?

  r.e. firebrandnotes.com

  Many thanks

  Nick

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

• 

  fstat · Staff · Oct 19, 2015 at 2:57 pm

  • Copy link

  Embed your video with a shortcode
  [youtube=https://www.youtube.com/watch?v=MOK6VeDKiyw&w=500]

  The above shortcode will display your video with a width of 500 pixels (50% of the original).

  You can read more on the youtube support documentation:
  https://en.support.wordpress.com/videos/youtube/#video-customization-options

• 

  firebrandnotes · Member · Oct 19, 2015 at 3:00 pm

  • Copy link

  Thanks so much, will give it a go now!

• 

  firebrandnotes · Member · Oct 19, 2015 at 3:12 pm

  • Copy link

  HI there…

  I’ve just tried to sort this by copying the line of code into my homepage but it didn’t display the video at all for some reason? Can you help solve?

  KIndest

• 

  fstat · Staff · Oct 19, 2015 at 3:24 pm

  • Copy link

  Try the following shortcode

  [youtube https://www.youtube.com/watch?v=MOK6VeDKiyw&w=500&h=282%5D

  If the above fails, set the video to its default resolution with this code:

  [youtube https://www.youtube.com/watch?v=MOK6VeDKiyw&w=854&h=480%5D

• 

  firebrandnotes · Member · Oct 20, 2015 at 10:00 am

  • Copy link

  I’ve tried both (i.e. copying and pasting into my homepage in the location of the video) but when I update and preview it only displays the line of code. Am I missing something very obvious?

• 

  fstat · Staff · Oct 20, 2015 at 10:40 am

  • Copy link

  If you have the Custom Design upgrade you can paste the following code in the CSS box of your Customizer

  .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
      width: 50%;
      height: 50%;
  }

  You can change the width and height percentage to your liking.

• 

  firebrandnotes · Member · Oct 20, 2015 at 11:31 am

  • Copy link

  Thank you very much. And how would I centralise it once the code is in and accepted?

• 

  fstat · Staff · Oct 20, 2015 at 11:44 am

  • Copy link

  .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
      width: 50%;
      height: 50%;
      left: 0;
      right: 0;
  }

• 

  firebrandnotes · Member · Nov 19, 2015 at 3:32 pm

  • Copy link

  I’ve tried this now but the video still displays far left….

• 

  thesacredpath · Member · Nov 19, 2015 at 11:09 pm

  • Copy link

  Hi @firebrandnotes, I would suggest the following, which is slightly modified from what @fstat gave above to target only your home page video. The second rule centers the video after the resize from the first rule.

  .home .fluid-width-video-wrapper iframe, .home .fluid-width-video-wrapper object, .home .fluid-width-video-wrapper embed {
      width: 50%;
      height: 50%;
      right: 0;
      left: 0;
  }
  .home iframe.youtube-player {
      margin-left: auto;
      margin-right: auto;
  }

• 

  firebrandnotes · Member · Nov 20, 2015 at 9:44 am

  • Copy link

  Thank you very much @thesacredpath – that seemed to instantly sort the video. However, when I pasted the new css in, for some reason it wiped my other code for social media icons which I had to then re-insert. Odd.

  Anyway, now that they are sorted and the video is reduced, there is a large gap between the call to action button and the social stuff.

  Do you have any suggestions to make this look better, please?

  Many thanks!

• 

  thesacredpath · Member · Nov 20, 2015 at 10:24 pm

  • Copy link

  Hmmm, this is tricky, and while I was playing with things, I noticed that the video gets way too tiny on narrower screens/windows. Let’s replace the code I have given you with the following Media Query which limits the resizing of the video to 768px and wider screens and see what you think. View your site on a phone and tablet if you have one and see what you think.

  @media screen and (min-width: 768px) {
  .home span.embed-youtube {
  	max-height: 250px !important;
  	height: auto !important;
  }
  .home .fluid-width-video-wrapper iframe, .home .fluid-width-video-wrapper object, .home .fluid-width-video-wrapper embed {
      width: 50%;
      height: 50%;
      right: 0;
      left: 0;
  }
  .home iframe.youtube-player {
      margin-left: auto;
      margin-right: auto;
  }
  }