Youtube embeding

Support
#1

When I embed a youtube video it looks really short and wide. It was fine before the update. All I am doing is pasting the link. Thank you in advanced for your help. Here is a link: http://blog.edinchavez.com/underexpose-or-overexpose/

#2

Hi,

Please try changing your embed code to this.

<iframe width="910" height="512" src="https://www.youtube.com/embed/73ELpzIR3aY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

I set the width to 910 as that is the highest width it could get base on your layout.
The height is calculated base on your video proportion.

Thanks

#3

Thank you for the reply, however, I have lots of videos embedded on the site, is there a CSS code I can use for all of them?

#4

Hi again,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

body iframe {
    min-width: 100% !important;
    width: 100% !important;
}

Let us know how this goes!

#5

Thanks for the super fast response, I tried the code, nothing looks the same

#6

Hey there,

Can you please provide the link of a page where you’re trying to make changes?

Thanks!

#7

No problem, here is the link, all the videos embedded on the site look like this now.

#8

Hello @edinchavez,

Thanks for writing in! Whenever embedding any sort of video content on your website, we strongly recommend using our included [x_video_embed] shortcode, which you can read more about in the Knowledge Base:

This is our recommended “native” way to embed videos for many reasons. If you are unable to return to previous posts and make the updates using this wrapping shortcode, the following custom CSS should help you achieve the results you’re looking for:

.embed-youtube {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: calc((9 / 16) * 100%);
}

.embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This will style the inline YouTube embeds using the same technique employed for our [x_video_embed] shortcode. Essentially, when you add an inline YouTube embed link, on the frontend of your website it is wrapped in a <span> with a class of .youtube-embed, which has the iframe for the video as a direct child. Essentially, it ensures that your video will respect its proper aspect ratio at all screen sizes. By default, the styling here is setting your video to a 16:9 aspect ratio, which is set using the calc() equation above. While this is the most common aspect ratio for video content these days, if you need to change this for any reason, you can do so by editing the values of the calc() equation above.

Hopefully this helps to point you in the right direction. :slight_smile:

Cheers!

3 Likes
#9

This works great and makes sense. Thank you so much for the help.

#10

Glad we could help.

Cheers!

1 Like
#11

One final thing to elaborate on as I forgot to mention it above—if you still have this code snippet in place you will want to remove it:

The scope of that CSS selector could prove problematic with other plugins or functionality you introduce to your website at a later date.

Cheers!

#12

I went to the link (http://demo.theme.co/icon-1/shortcodes/responsive-video/) found above, but the only video embedded properly on that demo site is a self hosted solution. The Vimeo and YouTube embed examples are showing up blank for me. Any idea?

I’d like to embed YouTube videos on my site with this [x_video_embed] shortcode.

Thanks.
Jack

#13

Hello Jack,

Thanks for updating this thread.

To use the [x_video_embed] [/x_video_embed] to embed a youtube video, you may use it like this:

[x_video_embed]<iframe width="560" height="315" src="https://www.youtube.com/embed/ai9BbUDCeU0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>[/x_video_embed]

We would love to know if this has worked for you. Thank you.