Docs

[tomtrout]

Hi. I tried using the composer to work with the css of my page that I have the iframes from youtube on. If I create my own divs I can edit them fine but I can’t seem to do anything with the iframes. They go right across the page taking up what seem to be the space of a single div. I tried the browser debugger to identify the element, even copied the name of the element(which was a bit long) just so I got what I thought was the exact name but still could not re-size it.

Can anyone shed some light on how to resize a youtube iframe? Thanks.

[Baroninn]

try using the built-in video element in cornerstone.
that should be 100% responsive .. and works with youtube
(sorry… I read that wrong)…

You should be able to use this :

<video width="400" height="300" ... 
<iframe width="400" height="300" ... 
<embed width="400" height="300" ... 

and you can also use css

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/YOUR_YOUTUBE_ID_HERE" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

[Baroninn]

Full iframe example below :
<iframe width="560" height="315" src="https://www.youtube.com/embed/9WIU5NN1Q0g" frameborder="0" allowfullscreen></iframe>

[Christopher]

Hi there,

@baroninn Thanks for sharing, really appreciate it.

@tomtrout
You can’t style <iframe> tag using CSS, if you wish to resize it you need to change width and height attributes in <iframe> tag.

You can use ’embedded video’ element in cornerstone which is responsive.

Please provide us with URL and let us know what you’re trying to achieve.

Thanks.

[tomtrout]

Thanks that does give me control. However, I have 6 iframes and I would like for them to be 2 in each row. I’ve played around with the top and left properties and it worked but the parent container won’t stretch to accommodate the last 2 iframes. Any ideas how I can accomplish this?

Thanks for your help. I now know that I can target elements in the theme!

[Rue Nel]

Hey @Tomtrout,

Thanks for updates! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

All The best.

[tomtrout]

Here’s the url to the page. http://trumoxy.com/pool-email/ “I’m just using the page as a test page. If I can get it to work I want to put it on the front page.

[Paul R]

Hi,

Upon checking, It looks like you have figured it out.

http://screencast.com/t/eaL0QUfpD

Have a great day!

[leannevenier]

Hi there, I’m trying to resize my iframe embedded youtube videos and I can’t seem to change the size of the videos on desktop, no matter what width and height numbers I input into this code:

<iframe width=”640″ height=”360″ src=”https://www.youtube.com/embed/lnB-9jS6SUk?rel=0&#8243; frameborder=”0″ allowfullscreen></iframe>

I’ve tried making the width and height numbers smaller, but no matter what I type in, the iframe embedded video is huge.

I’ve tried increasing the margins or padding in the video sections to make it smaller on desktop, but then it doesn’t work on mobile since the padding and/or margins force the video to completely disappear (the remaining space is not big enough for the video to show up on mobile).

So, somehow I need to change the settings in the embed code, but the fixes above (and elsewhere on the forum) about simply changing the iframe numbers don’t work.

This is the page that I’m building – i have a few different videos I want to feature in single column format, each in its own full width section with the column container turned on (ie in a full width, but centered section with only a single column in the row (I can force the video to be smaller by adding a second column to the row, but I’d prefer not to do that )

With the single column, no matter what I do to the iframe embed settings, the video takes up the full width of the column section in single column.

I would like it to be centered in the column but only be about half the size that Cornerstone is forcing the video to become at this point.

Can you tell me how to fix it?

Here’s the page I’m building:

Creative Flow Programs

Thanks for any help you can provide! 🙂

[Paul R]

Hi,

To reduce the width, you can add this in the style field of your embed video element.

width:500px; margin:0 auto;

http://screencast.com/t/xHr9Ocvd

You may change 500px to achieve your desired width.

Hope that helps.

[leannevenier]

Yay! awesome – thank you!! That worked great! (the border of the container margin ends up being pretty huge if you use anything under 600 px width, though – so you either have to shut off the container entirely or make the embedded video bigger).

When you use the Video Player element of Cornerstone (where you paste in the url of the video on youtube), the border gets resized based on the size of the video (as you can see in the video embeds at the very bottom of my home page http://CatalyticColor.com

(and yes, I know that ideally you should use the Embedded video element, but the advantage of using the Video Player with url link element instead of Embedded video is that on mobile, all of the Youtube title and note cards still show up when you use the Video Player element. With Embedded video in cornerstone, all the notes and title cards get stripped like they do when you watch videos directly on Youtube on mobile.)

So, follow up questions:

1. is there a way, with your method above of resizing the embedded video, to modify the size of the container (ie the white margin that is all around the video (as opposed to turning off the container all together where there are no borders (less attractive).

2. Do you have any idea why the traditional method of changing the size of the embedded video don’t work in Cornerstone? ie. simply changing the number of pixels in the embed code (this method DOES work in my pages that I’m not using cornerstone and just using a standard WordPress editing format)?

Is there anything I should change in my Cornerstone settings or is it just something that doesn’t work in Cornerstone yet (ie changing the embed code to modify the size of embedded videos)?

Thanks for letting me know if there’s something I should tweak in my Cornerstone and how to change the size of the emmbedded video border in the style settings! 🙂

[leannevenier]

oops, spoke too soon.

Your solution worked on desktop but on mobile the video box is cut off (ie only half of the video box is visible – it goes off screen and there’s no way to make it show up on mobile)

Your code is non-responsive for other formats like mobile and tablet.

Any other suggestions? (like getting Cornerstone to work with the embedded video settings for width and height?)

thank you!

[leannevenier]

I figured out how to make the code responsive on mobile devices.

Do this: (ie add MAX in front of width)

max-width: 700px; margin: 0 auto;

I still have the question about the BORDER around the embedded video.

Since using the style code makes the border a set width (instead of how in wordpress it will be responsive depending on the max width), is there CODE for changing the border width around the video box so that it’s also responsive and related to the max-width?

Thank you for any suggestions you can provide!

🙂

[Rad]

Hi Lean,

Border size will not respond the same as the width. Width responsiveness is based on its parent element, while border is based on its current element.

But you can always change its size through @media, like this, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( max-width: 600px ){
.x-video.with-container {
    padding: 1%;
}
}

Hope this helps.

[leannevenier]

Thanks – I’ll play around with that code and see if I can adapt it to make it work for my site.

The problem with specifying the max-width in the site-wide CSS code is that sometimes I DO want the video container to respond full size as is the default in Cornerstone (ie. on some of my other pages like my home page).

I’ll have to see if your CSS code will work with either eliminating that max-width line of code or just making the number much larger than 600 so it doesn’t adversely affect my other video embeds on other pages of my site.

Thanks for the help!!

[Author]

Posts