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
This simple snippet adds an update status after your post title in WordPress. It checks if the post has been updated since […]
The Customizr theme is built on Twitter Bootstrap, which means that you can use the awesome built-in grid system included in Bootstrap. […]
The following is a simple snippet which describes how to replace the sliders default navigation arrows with icons. The method detailed below will […]
I showed you how to add a widget area after the header a few weeks ago. But what if you feel you don’t have enough widget areas in the footer? Read on…
By continuing to use this site you consent to the use of cookies in accordance with our cookie policy.
29 thoughts on “Embedding a Youtube video the right way in Customizr”
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!
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.
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.
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.
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/
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.
Hi Dario, did you try this guide ?
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;
}
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
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.
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!
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)
Cooool, thanks for this feedback Mitch!
Hey, any luck with letting us add video to the image slider yet?
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
Ah the joys of automated stripping – the code to add to the html is:-
Really struggling to get the post to show – so here goes again:-
<!–
–>
Last time
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}
Hi Brendan this looks to be very useful. Did you finally manage to use the syntax highlighter?
Thanks for your contributions!
how can i embed a video in the slider (instead of the grey box?)
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.
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
Hi, this will be available for beta test next week and available the week after.
Hi Nicolas,
Any news with video slide integration?
Thank you very much!
Jaume
Hey Nicolas,
Are we able to embed video in the sliders yet?
Thanks..
Hi Andy, this will be implemented pretty soon.
Cheers
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?
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.