Do you use a plugin for displaying, or are you copying and pasting the embed-code from the youtube site?
Hello,
No, i just copy and paste the embed code.
The embed code looks something like this right?
<iframe width="420" height="315" src="//www.youtube.com/embed/EvuL5jyCHOw" frameborder="0" allowfullscreen></iframe>
That specifically sets the width of the ifram to 420 pixels?
Do you have an example of what you use?
If you inspect the code of this page, using the google chrome tool, then you can see that uses the 100% width of the site. The width of the site is more than 420 pixels. So, how can i use the width of the youtube video instead? There must be a setting inside the setting of the responsive theme.
On your page, it shows this
<iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/5-qIuk-RxT8" id="fitvid73043"></iframe>
So it looks like you only paste the URL of the youtube video, and not the html code available under the ’embed’ section on the youtube page.
You could try copy & pasting that.
In my channel, in video share settings if i click on embed option there is the “<iframe….” code you mentioned. When i click on ‘use old code’ setting there is the following code
—————-
<object width=”560″ height=”315″><param name=”movie” value=”//www.youtube.com/v/5-qIuk-RxT8?hl=el_GR&version=3″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”//www.youtube.com/v/5-qIuk-RxT8?hl=el_GR&version=3″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>
——————
Both code alternatives has the same result, the full width.
So, what can i do?
OK. That was not what I would have expected.
You could try
.fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
max-width: 420px;
}
And replace the 420 with something you feel comfortable with.
If the screen width is less than that, it will be 100% from then on downward.
This css code tip works good but not fine.
If you visit this page you will se that between the bottom side of the video and the top of the blue link on the right there is a white blank space.
Althought i set the ‘max-height: 315px;’ of the ‘fluid-width-video-wrapper embed’ class, you can see this white space.
ANy suggestion?
If you set the max-height to span.embed-youtube instead, it might look better.
I set both max-width and max-height to this embed class and works fine.
Note this, if you paste a YouTube video then it adjust to the custom css properties i set. If you paste a Vimeo video, like this page, then it doesn’t
Thanx
Hello again, sorry that i re-open this topic but i have the same issue in other site that uses also the Responsive theme.
Please have a look at this page. i inserted the following code
.span.embed-youtube {
max-width: 560px;
max-height: 315px;
}
and the code did not work.
There are few classes and subclasses. I tried for a couple of them in hierarchy but nothing is changed.
What would you suggests?
Thank you.
There’s a dot before “span”. I’m guessing it should not be there because there probably is no class called “span”.
You’re right.
However the correct code
span.embed-youtube {
max-width: 560px;
max-height: 315px;
}
does not apply to this page as you can see.
In addition, each time i try to reduce the width of the class and the sub class, the player black screen does not reduced.
If you have time have a look using the web developer tool of Firefox or Google Chrome. I cannot find the right class.
Thank you
The youtube iframe is embedded in a div with class fluid-width-video-wrapper
I don’t know what plugins you use, perhaps you turned on off?
I use the following plugins
Basic Google Maps Placemarks
Contact Form 7
Count Per Day
Google Analytics by Yoast
Google Typography
Google XML Sitemaps
Jetpack by WordPress.com
Meteor Slides
Really Simple CAPTCHA
TinyMCE Advanced
Ultimate Plugins Smart Update Pinger
WordPress SEO
WP-Optimize
If use the following code
.fluid-width-video-wrapper {
max-width: 600px;
max-height: 359px;
}
that is the 70% of the original size, then the height is not reduced and the video is shown like this image. Like a square.
I don’t think that is a matter of a plugin.
