-
Posts
-
I love the Photo Blog theme. I recently converted my site to use this theme. Since I use a mix of text pages, and also video pages and images, I like having a wide content area (1950 pixels wide for non-mobile devices).
I had previously used the Cubic theme which displayed full width embedded Youtube and Vimeo videos automatically on wide computer screens taking up nearly the whole width of the screen.
I am trying to get a similar wide video posts result using the Photo Blog theme, as I prefer the many updated options it offers.
I have followed the instructions in your reply here: https://theme-support.wordpress.com/topic/how-can-i-widen-the-content-body/ to add CSS:
.entry-content {
max-width: 1950px;}
and also changed my Media Width to 1950px.
This works great for my posts that have lots of text on wide screen devices. But now embedded video from YouTube, Vimeo, and Facebook are all Left Justified and still the same smaller size.
I would really like the videos to all automatically better fit the width of whatever screen the person is using, and go up to the 1950 pixel maximum width I specified for the content area using the CSS and Media Width options above.
If full size videos are not possible using this theme, then please tell me how to center the embedded videos, so they are not on the left side of the screen.
Here is an example URL with embedded YouTube video on it that is Left Justified and too small (I want it to take up entire content area width) or else be centered .in content area:
ISN – It’s Supernatural Network Live Stream
Thanks for your help, so my site can better display wider videos using the Photo Blog theme.
The blog I need help with is glorify.com
Update: Since making this 1950 pixel content change above, I just noticed that Videopress and Facebook videos are now working full screen (1950 pixels wide) the way that I desire on my Mac 5K screen, and they shrink accordingly on smaller screen widths, but Youtube and Vimeo embedded videos are not being centered, nor are they taking advantage of the entire content width that I specified (1950 pixels wide) on my 5K Mac screen.
I also plan on featuring 4K videos (3840 by 2160) (2160p) on my site using the Photo Blog Theme, as well as much text and ebooks, so that is why I need the wider width to take advantage of the large screen pixels properly. I do not want only my text or videos just in the center portion on my wide computer screen. Thanks for any help to resolve the YouTube and Vimeo videos embed issue!
Here is a sample of both the Facebook and the Videopress videos displaying correctly on my site using this theme:
Facebook video sample page:
Bill Johnson on Communion – Power of CommunionVidepress video sample page:
Test 4The following Vimeo and YouTube sample pages show the Left Justified incorrect issue and also the smaller embedded players for Vimeo and YouTube that I would like to have fixed:
Vimeo sample page:
Yielding To God – Christian VideoYouTube sample page:
Global Prayer Room – 24/7 Prayer/WorshipThanks!
I just added the below CSS fix I received by email this morning from one of your Happiness Engineers named Edwin to cause all YouTube and Vimeo videos to be centered. This takes care of the video centering issue, but I am still hoping for a solution to make both the Vimeo and YouTube videos take up the full width of the content area (up to 1950 pixels.) Thanks.
/* Align Vimeo Youtube video aligned middle | 1847293-zen EH */
.embed-vimeo iframe, .embed-youtube iframe {
margin: auto !important;
}If full size videos are not possible using this theme, then please tell me how to center the embedded videos, so they are not on the left side of the screen.
To centre the smaller videos, try adding this code in your Customizer’s CSS panel:
/* Centre smaller videos / https://theme-support.wordpress.com/topic/how-to-widen-videos-displayed-in-content-area-of-photo-blog-theme/ kp */
.jetpack-video-wrapper {
margin: 0 auto;
display: inline-block;
}
To widen the smaller videos, try this:
/* Enlarge videos on wider screens / https://theme-support.wordpress.com/topic/how-to-widen-videos-displayed-in-content-area-of-photo-blog-theme/ kp */
@media screen and ( min-width: 2000px ) {
.jetpack-video-wrapper iframe {
width: 1950px !important;
height: 1100px !important;
}
}
While we generally try to avoid using
!importantin custom CSS, it’s necessary here to override the inline CSS within the video embeds.Let us know how it goes.
Thanks Kathryn P. for your very helpful reply! Your CSS centering code did not work for me, but the video widening CSS code did work great exactly as I desired. So I merged Edwin’s CSS centering code with yours, to get a working layout on my site that I desired! Now all my Vimeo, YouTube, Videopress, and Facebook videos display properly on all types of devices and screen sizes.
I have tested my site using screenfly at: http://quirktools.com/screenfly/
Here is the full CSS code I am using now with a Media Width of 1950 pixels:
.entry-content {
max-width: 1950px;
}
/* Align Vimeo Youtube video aligned middle | 1847293-zen EH */
.embed-vimeo iframe, .embed-youtube iframe {
margin: auto !important;
}
/* Enlarge videos on wider screens / https://theme-support.wordpress.com/topic/how-to-widen-videos-displayed-in-content-area-of-photo-blog-theme/ kp */
@media screen and ( min-width: 2000px ) {
.jetpack-video-wrapper iframe {
width: 1950px !important;
height: 1100px !important;
}
}Thank you again for your excellent, professional help. I am a happy WordPress.com customer!
Glad you found a combination that works!
Thank you again for your excellent, professional help. I am a happy WordPress.com customer!
You’re very welcome. Feel free to get in touch again via chat or in the forums if you need anything else! Chat is usually faster, but you’re always welcome to come back here. :)
You must be logged in to reply to this topic.
Theme Support 