Youtube embedded video stretched across screen and top and bottom cut off

[jamie2364]

Hi

I’m using Youtube embedded video on my site.

When I’m embedding using the video section in cornerstone, I can set a max width and it seems to embed ok. However, when I use it in a raw content element anywhere on my site, it stretches out the video to be the full length of the window and cuts off the top and the bottom of the video. The height seems to be set off the embed code, but the width isn’t being registered, so a whole chunk of video gets cut off.

To see what I mean, please see this URL: jamieharrisonguitar.com/contact and select ‘Before Buying’ from the first dropdown, and ‘Payment’ from the second dropdown. You will see the video there and you will see what I mean. Please don’t tell me to use the video element in cornerstone as I’m not using cornerstone for this particular setup.

If you could tell me some sort of global CSS, or CSS to target the videos on this page or something, it would be great, or else tell me how I can alter the HTML code so that it works correctly.

Currently I am using the embed code from youtube, eg.

Thanks
Jamie

[nabeel]

Hey Jamie,

Thank you for reaching out to us. You can give your Classic Raw Content element a class e.g embd-video and then add the following code in your Cornerstone’s CSS section:

.embd-video iframe {
    width: auto !important;
}

Let us know how this goes!

[jamie2364]

I’m not using a raw content element - it’s pure html on the Wordpress edit page (like I said, not in cornerstone) I’ve added the YouTube embed code, but where in that code can I add a class and what should the code be? Thanks for your help

[jade]

Hey Jamie,

You will have to wrap the Youtube iFrame/embed code in a div an add the class embd-video like this:

<div class="embd-video">
     Add the youtube embed code here...
</div>

Also, please note that since this is using the default Wordpress functionality, this goes beyond the scope of our support.

Hope this helps.