Embedding a Youtube video the right way in Customizr

by Press Customizr|Published 22 October 2013

Following a discussion on the WordPress Forum about how to embed videos in Customizr, here’s a quick snippet.

In WordPress, if you just copy and paste the url of a video in a post, it will be automatically ‘recognized’ and the video will be displayed.

But what if you want to set the dimensions of the video wrapper?

To do that, you can use the WordPress built-in shortcode video url , like in the following example :

Thanks to @lisa , @Jan Dembowski, @tomaja for their contributions in the forum

AUTHOR

Press Customizr

Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.

357 posts

29 thoughts on “Embedding a Youtube video the right way in Customizr”

29 comments

ikenfin
11 November 2016, 13 h 17 min

Hi! Is there a way to show that “width” and “height” as text fields in embed window? Maybe i missing some filter or something. Thanks!
Menaka S
12 July 2016, 4 h 14 min

The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Capstone Engineering
11 July 2016, 18 h 52 min

How do I format the Slider so that it will display a video? I would like to display just one video across the page behind my slider text. I can seem to get it into the slider but it does not extend to the edges of the browser window.
Dario
23 June 2015, 23 h 12 min

Sorry, on my previous post my email was wrong.

I’m embedding a YouTube video on a page using the short code [embed width="600" src="https://www.youtube.com/watch?v=vizj4QguIRk"] en everything works fine. But, how can I prevent the related Youtube videos at the end of playback? Thank you in advance.
- Mitch Powell
  24 June 2015, 0 h 35 min
  
  Dario –
  
  Try this. I’m not absolutely sure it works.
  
  add ?rel=0 to the URL.
  
  That is, this:
  [embed width="600" src="https://www.youtube.com/watch?v=vizj4QguIRk"]
  
  becomes this:
  [embed width="600" src="https://www.youtube.com/watch?v=vizj4QguIRk?rel=0"]
  
  Otherwise, there’s a WordPress plugin that addresses the issue, OR, I think there’s a setting in your YouTube channel somewhere, although I can’t find it right now.
  
  Here’s the wpbeginner article that mentions the ?rel=0 hack:
  http://www.wpbeginner.com/plugins/how-to-turn-off-related-videos-when-embedding-youtube-videos-in-wordpress/
Dario
23 June 2015, 23 h 09 min

Hi, I’m embedding a YouTube video on a page using the short code [[embed width="600" src="https://www.youtube.com/watch?v=vizj4QguIRk"] en everithing works fine. But, how can I prevent the related Youtube videos at the end of playback? Thank you in advance.
- Nicolas
  24 June 2015, 5 h 39 min
  
  Hi Dario, did you try this guide ?
Jabed Bhuiyan
24 May 2015, 18 h 45 min

is there any way to embed youtube video by getting link ftom custom field?

i use the code bellow, but it’s not works 🙁

add_action (‘__after_content_title’, ‘display_custom_fields_block2’);
function display_custom_fields_block2() {
if ( ! is_singular()) return;
$custom_fields2_array = array(
‘youtube’ => ‘Watch Film’,
);
$output2 = custom_fields2_iteration($custom_fields2_array);
if (strlen($output2) > 0 )
echo ‘
‘.
$output2.’
‘;
}
function custom_fields2_iteration ($custom_fields2_array) {
$output2 = ”;
foreach ($custom_fields2_array as $custom_field2 => $label) :
$custom_field2_value = get_post_meta(get_the_ID(), $custom_field2, true);
$output2 .= (strlen($custom_field2_value) > 0 ? ‘

‘.$label.’: [embed width="640" height="360"]‘.$custom_field2_value.’[/embed]
‘ : ”);

endforeach;
return $output2;
}
Sam
13 February 2015, 13 h 58 min

Hi guys! need help… How can I actually put the video in the slider? I pasted the code in the functions.php in the child-theme and I pasted the video URL in a post and click yes to slider option. Video didn’t show up in the slider? Did I missed anything? Thanks
Mitch
17 January 2014, 13 h 26 min

I like my full-size video on a desktop to be a larger size (e.g., 853 x 480,) but when I look at the site on a phone (Droid X), the video seems to only resize a little, or maybe not at all – I can’t quite tell.) I’ve used the [embed width=”853″ height=”…” method and all I get is the link showing up where the video should be.

I’ve used the Youtube code you get when you click on “Share | Embed” at YouTube, and this is when I get the video that doesn’t resize; and , I’m sorry, Brendan, but your post has left me confused.

I’ve added the CSS you show, and I’ve attempted the code you provided for the HTML, of course replacing the curly brackets with > and < symbols, but it doesn’t work. I don’t get where you have classes in the HTML which aren’t in the CSS you provide, i.e., “youtube-wrapper” and “youtube-player”

So, embed isn’t the right way, the Youtube code isn’t the right way, and Brendan’s way isn’t the right way. What IS the right way?

Thank you.
If you go look at any of the bands on bluewatermusicfestival.org, you’ll see I’ve gone back to the youtube iframe method for now, but I really would like to see the video resize to a 320px or so, size on my phone. Wonder why I’m not getting the [embed] method to work.
- Nicolas
  17 January 2014, 13 h 43 min
  
  Hi Mitch, I just found two interesting resources about that:
  a plugin : http://wordpress.org/plugins/responsive-video-embeds/
  A code snippet : http://www.wpstuffs.com/youtube-videos-responsive-wordpress/
  
  Hope this will help and I look forward to reading your feedback!
  - Mitch Powell
    17 January 2014, 14 h 44 min
    
    That works!
    
    Yippee! The code snippet from wpstuffs was easier than installing yet another plugin.
    
    Look at http://bluewatermusicfestival.org/common-sense/ using your iPhone or Android or whatever. Very nice.
    
    I’ll make the change to all the other videos in the [eight hours from now] morning, noon, whatever. (burning the midnight oil over here)
    - Nicolas
      17 January 2014, 14 h 47 min
      
      Cooool, thanks for this feedback Mitch!
Jess
10 January 2014, 22 h 59 min

Hey, any luck with letting us add video to the image slider yet?
Brendan Greene
11 December 2013, 13 h 57 min

Hi – I’ve been working for sames like ages to get embedded videos to behave responsively, within the context of containing span’s, and maintain the correct aspect ratios. After much to-do finally got it working – so I thought I would share.

Firstly add this to your CSS file:-

/*
//////////////////////////////////////////////////////////////
// Video box made responsive
//////////////////////////////////////////////////////////////
*/

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Then when you embed the youtube video do this:-

The video will then expand to the width of the containing span class whilst maintaining its aspect ratio.

The “?wmode=opaque” ensures the video “passes under” a sticky header menu, and the width and height are only there to provide the aspect ratio, which then matches the padding-top on the class.

This uses the correct youtube class – which provides the player and this means it will work on iPhone, iPad, Android etc. as well as normal PC.

Hope that’s of help to someone.

Cheers again Nicolas
- Brendan Greene
  11 December 2013, 13 h 59 min
  Ah the joys of automated stripping – the code to add to the html is:-
- Brendan Greene
  11 December 2013, 14 h 01 min
  
  Really struggling to get the post to show – so here goes again:-
  
  <!–
  
  –>
- Brendan Greene
  11 December 2013, 14 h 02 min
  Last time
- Brendan Greene
  11 December 2013, 14 h 03 min
  
  Ah Nicolas I am sure you will tidy up these comments – replace the {} with
  
  {div class=”youtube-wrapper video-container”}
  {iframe width=”560px” height=”325px” class=”youtube-player” src=”http://www.youtube.com/embed/e5_Q-LvQu1Y?wmode=opaque” allowfullscreen=”” }{/iframe}
  {/div}
- Nicolas
  11 December 2013, 14 h 10 min
  
  Hi Brendan this looks to be very useful. Did you finally manage to use the syntax highlighter?
  Thanks for your contributions!
Harald
25 November 2013, 10 h 52 min

how can i embed a video in the slider (instead of the grey box?)
- Nicolas
  25 November 2013, 12 h 06 min
  
  Hi, there will be a great improvement in that direction in the next release of the theme (in the coming days).
  Stay connected and thanks for using the theme.
  - e.c
    28 November 2013, 10 h 53 min
    
    Dear Nicolas,
    
    Thanks for your beautiful theme, it’s a great work that I ever used!
    I’m also with the same need to put youtube or any uploaded flash movie embed to slider, if so, the slider will be more powerful.
    How great to hear about the next version will achieve that function, I can’t wait to use it! When will the next version be released?
    
    Cheers
    - Nicolas
      29 November 2013, 10 h 18 min
      
      Hi, this will be available for beta test next week and available the week after.
      - Jaume Albaigès
        24 February 2014, 12 h 33 min
        
        Hi Nicolas,
        
        Any news with video slide integration?
        
        Thank you very much!
        
        Jaume
  - Andy
    11 April 2014, 0 h 17 min
    
    Hey Nicolas,
    Are we able to embed video in the sliders yet?
    
    Thanks..
    - Nicolas
      14 April 2014, 8 h 29 min
      
      Hi Andy, this will be implemented pretty soon.
      Cheers
  - Kevin
    8 August 2014, 20 h 41 min
    
    Anything new since 2013? I found this thread but haven’t seen any new posts since. Can I put a youtube video in the slider?
  - suzana
    25 September 2014, 13 h 46 min
    
    hello,
    
    I am new to css – can you please help me to use the video instead of image slider?
    
    1) where exactly do I insert the code – can I insert it within the theme’s provided “custom css”, if no where exactly?
    2) what the complete code that I need to insert does look like?
    
    Thanks!
    Su.

Comments are closed.