How do I change the width of embedded video?
-
It seems impossible to get embedded video to a different width in the illustratr theme – even with a premium account! Any help here? I’ve tried customizing the CSS code. Nothing works. I’ve been on the forums – other people are having the same issue. I couldn’t find any solution that works.
Currently all my embedded video takes up almost the entire width of any given screen. I would like it to be the same width or smaller that the text of each page.
The blog I need help with is: (visible only to logged in users)
-
You can customize an embed by manipulating the service’s shortcode, for example:
https://en.support.wordpress.com/videos/youtube/#video-customization-options
If you have additional questions, please let us know.
-
None of these options appear to work with my website (www.rajeevm.com). I am not sure why. Perhaps there is some strange limitation with the illustratr theme?
I currently have this shortcode set in my CSS:
.video-wrapper {
width: 640px;
height: autopx;
margin-left: auto;
margin-right: auto;
}I also have the media width set to 640px.
But neither of these things seem to do anything. Any help would be greatly appreciated.
-
What you provided is not a shortcode, it’s CSS.
Did you review the link I provided?
Also, can you give me a link to a post or page where you’re having an issue?
-
Sorry. I am obviously quite new at all of this. I appreciate the help. Thanks.
I am having the issue with every page of my portfolio website: rajeevm.com
Here is a page of my site: http://rajeevm.com/portfolio/nzso/ – the two video clips appear to take up the entire width of page, instead of being 640px wide.
They appear to become 640px when I am editing the CSS, but when I log out, they jump to being the entire width of the page.
-
I looked at your Project Page, nzso, and the video is 640px wide:
If I’ve misunderstood the issue, or if you have any other questions, please let me know.
-
I can see that in the image you have posted the data of my page clearly states that the video is 640px wide. I get that. I am the one that set that up.
However, the page itself, when you look at it, clearly has a video embedded on it that is taking up almost the entire width of the page – clearly not 640px (unless your monitor is only 640px wide).
This is the issue that I am having. I have put in all the necessary requirements for the video to be displayed as 640px wide, but it is simply not displaying that way. Am I missing something here? Please explain to me if I am.
I have looked at my website on four different machines that have four different monitors – each one has my video embeds displaying at much wider than 640px. For example, the laptop I am writing this post on has a resolution of 1366×768. The NZSO video is taking up most of the width of my browser, meaning it is clearly wider than 640px.
I hope that makes sense. I am not sure how to be any clearer than I am currently being.
-
When you view the page, can you try pressing Control+0?
If that doesn’t work, send me a screenshot, so I can better understand the issue. You can simply upload the screenshot to your Media Library, like any other image, and I’ll be able to access it from there.
The page at the following link has some helpful tips for taking screenshots:
Once you give me some additional clarification, I will be more than happy to continue addressing your issue.
-
Control+0 – I’m not having any issues with zooming in or out of my page. Nothing happens when I press those keys.
I have made screenshots of these 2 pages and uploaded them to my media library:
1) http://rajeevm.com/portfolio/nzso/
2) http://rajeevm.com/6-2/showreel/I think this issue is linked to the portfolio aspect of my site.
As you can see from the screengrabs, the showreel page is clearly showing a video that is much narrower than the width of the page – 640px. However, the NZSO portfolio page is showing a much wider video, almost taking up the entire width of the page – clearly wider than 640px.
I hope that this issue is clearer now. Please let me know if you need any more clarification.
-
I commented out the CSS you had for this issue and entered this:
/* Adjust width of Video */ .video-wrapper { width: 640px !important; margin: auto !important; max-width: 100%; }This way, your videos will still be responsive when viewed on a small screen.
If you have additional customization questions, please try posting to our CSS Customization forum:
https://en.forums.wordpress.com/forum/css-customization
When you create a CSS-related help request, please make sure to select or link to the WordPress.com site you’re working on and include a clear description of the change you’re trying to make.
Let us know if you have any more questions.
-
- The topic ‘How do I change the width of embedded video?’ is closed to new replies.