i am using full width post template, whenever i add video, it automatically takes 100% width of the post,
but i always try to maintain 650px width for images in my post. videos looks little awkward in posts, is there any way, i could attribute video width as per my requirement?
http://www.unbelievable-facts.com/2015/04/facts-about-oceans.html
i want my video width not more than 650px.
please help!
thanks
Hi,
Please change here the width for your videos(it is set to 100%): http://screencast.com/t/JiHln0Jt9Ri
If you use Speed Booster you will have to search in this file: http://screencast.com/t/5MDw4mccc8
Thanks!
Thank you for replying,
What should i add there to get max width of 650px? i mean, i want width not more than 650px, and in less than 650px width, it should work responsive!
Hi,
You can use percent instead of add a fixed width. For example if you change to66% your max width will be 647px: http://screencast.com/t/0bjNcsqmwIz8 – http://screencast.com/t/rehI0Vv5zuTB
Thanks!
i did that it’s not working, i am using speed booster plugin, i made these changes, still not working, can you please help?
http://www.unbelievable-facts.com/2015/05/facts-about-marilyn-monroe.html/2
Hi,
Please try to use embed video in a div with specific width – http://screencast.com/t/K5EDcQXe1U and see how it goes.
<div style="width: 640px;"><iframe width="640" height="360" src="https://www.youtube.com/embed/D8-g8CpXdO8" frameborder="0" allowfullscreen></iframe></div>
Thanks!
is there any other way? i mean i have many videos and posts, i’ll have to go through all of them!
Hi,
Unfortunately you cannot target iframes without a specific class or container as you can see your iframe is added in a paragraph – http://screencast.com/t/5STAMeORY
A solution will be to target all iframes from a full width post(no sidebar) and add a fixed width using media queries so it will be applied only for tablet and desktop(so on mobile it will be used percentage width like on images) – http://screencast.com/t/CLff4CT2x – http://screencast.com/t/oMJaPBgRxd
@media (min-width: 768px) {
.single .td-pb-span12.td-main-content .td-post-content iframe {
width: 650px;
display: table;
margin: 0 auto;
}
}
Hope this helps!
Hello, i am having trouble with this, when i changed it to 66%, it was also taking that 66% width on mobile screen, then i changed it back to 100%.. but still it’s taking 66% on desktop and mobs..
i have rechecked .js files many times, they are set to ‘100%’
please help!
Hi,
Please check the above css solution, it is tested on your site and it should work fine(please use !important tag for width value).
@media (min-width: 768px){
.single .td-pb-span12.td-main-content .td-post-content iframe {
width: 650px !important;
display: table;
margin: 0 auto;
}
}
Yes, you are right about this, changing to 66% it will change the width also on mobiles, but the custom css should work. Please clear cache as I have checked your article and iframe is 100% as you can see – http://screencast.com/t/9eVOmWOJ554q
Thanks!
