Vimeo video block title resize problem

Teetime · October 28, 2015

I have a page with several Vimeo video blocks on it. The page is stretchy. It looks fine on large monitors and on my smartphone. But on mid-size devices like tablets some titles wrap as the thumbs resize smaller. This throws off the alignment of the thumbs. One option I could use is to create in Photoshop a thumb image for each video with the title embedded in the thumb. But is there a better way, perhaps with CSS? I would like the title to resize gracefully with the video thumb.

Teetime · October 29, 2015

Teetime wrote: »

I have a page with several Vimeo video blocks on it. The page is stretchy. It looks fine on large monitors and on my smartphone. But on mid-size devices like tablets some titles wrap as the thumbs resize smaller. This throws off the alignment of the thumbs. One option I could use is to create in Photoshop a thumb image for each video with the title embedded in the thumb. But is there a better way, perhaps with CSS? I would like the title to resize gracefully with the video thumb.

I'm bumping this in hopes there is an easier way before I spend the effort to replace my Vimeo thumbs with titled thumbs. Can anyone suggest a way to place a title or caption over, or in the Vimeo video content block so that it resizes properly with the thumb?

Thanks.

Hikin' Mike · October 29, 2015

I'm not sure if I can help, but a link to the page would be helpful to me and/or the helpers here.

Teetime · October 30, 2015

Hikin' Mike wrote: »

I'm not sure if I can help, but a link to the page would be helpful to me and/or the helpers here.

Thanks for the reply Mike. Unfortunately I haven't published yet. I have decided to go ahead and create a titled thumb for the Vimeo videos. The Vimeo video block doesn't give you much control over the title - on/off and small/medium/large. Small text is still too large and when you resize the page, the text wraps as the thumbs become smaller. If the title for one thumb is longer than the others it will wrap while the others don't, and this throws off the vertical alignment of the thumbs.

Hikin' Mike · October 30, 2015

Teetime wrote: »

Thanks for the reply Mike. Unfortunately I haven't published yet. I have decided to go ahead and create a titled thumb for the Vimeo videos. The Vimeo video block doesn't give you much control over the title - on/off and small/medium/large. Small text is still too large and when you resize the page, the text wraps as the thumbs become smaller. If the title for one thumb is longer than the others it will wrap while the others don't, and this throws off the vertical alignment of the thumbs.

I don't have video on my site, so I probably can't help w/o seeing it.

Teetime · November 11, 2015

Mike, I've published now and set up this test page to illustrate the problem I would like to resolve. The titles are a bit contrived to best show the problem. On a large monitor everything is fine. But on mid-size devices the blocks do not align vertically because of different wrapping in the title, as shown in the screen shot below.

I think the best solution would be if I could physically break every title into three lines with the 2nd and 3rd lines possibly blank for a really short title. I tried putting "br" tags in the title but this did not force new lines. Another possible option might be to significantly reduce the size of the text beyond what it is when "small" is selected.

I'm still pursuing this because I can't think of any way other than the title to embed SEO information that Google will find related to the video. So if you have any suggestions on that I might be able to do without the titles.

Thanks!

Hikin' Mike · November 11, 2015

What I would do is to move the titles to the bottom:

.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content {
    margin: 0 auto 50px;
    }    
    
.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {
    position: absolute;
    bottom: 0;
    width: 31%;
    margin-left: 1.2%;
    }

Hikin' Mike · November 11, 2015

Unrelated, I noticed the 'Ryan Homes...'. My parent's first house (40 years ago) was a Ryan House and lived in PA.

Teetime · November 11, 2015

Thanks Mike. Your code worked with one small modification. Your "width: 31%" set the text width to 31% of the player width. I set it to 100% and that part works correctly. This is actually preferred behavior because some pages have 3 videos across, and others have 4 across. There is one remaining issue that I'm hoping there is a CSS fix for. The title for the first video "2015 Scotland" is a single line on a PC monitor whereas the others are two lines. The titles are bottom aligned rather than top aligned - see image below. Is there a way to still have them below the player, but top aligned?

Hikin' Mike · November 11, 2015

Odd that you set it to 100% because it doesn't show the titles under the photos/video on my testing (Firebug).

Remove this in green and change this in red:

[COLOR=SeaGreen].sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content {
    margin: 0 auto 50px;
    }    [/COLOR]
    
.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {
    position: absolute;
    [COLOR=Red]top: 0[/COLOR];
    width: 31%;
    [COLOR=Red]margin: 260px auto[/COLOR];
    }

Hikin' Mike · November 11, 2015

Just thinking, you may need to add a 'height: 75px' if you show a few rows because of the single line title.

Teetime · November 11, 2015

Mike, thanks for staying with me on this. I'm learning here. When I reported that I needed to change the width to 100% I hadn't gone beyond looking at it in customize mode where it looked fine. When I published, it was all skewed. When I changed the width to your 31% and republished it looked perfect. However, that CSS is tied to a 3-wide set of video blocks because of the 31%, right? Add a fourth and the titles no longer align (see image below). And since this CSS affects all Vimeo video block instances in the site, it seems I would have to always use the same number of video blocks on any page where I want to place video. Is there a way around this? Any way to apply this CSS at the page level?

Hikin' Mike · November 11, 2015

The 'width: 31%' is based on your 3-columns. If you want 4, then change it to around 22%.

Hikin' Mike · November 11, 2015

Teetime wrote: »

Is there a way around this? Any way to apply this CSS at the page level?

Yes, you can put it on each page, or if you want to add it to your theme's CSS, find the page node...

.sm-user-ui [B][COLOR=Red].sm-page-node-sZkwdn[/COLOR][/B] .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {}

Teetime · November 12, 2015

Mike, this is excellent. You have been such a big help on several issues I have run across. I really appreciate it.

I looked at your website - it is stunningly beautiful. Great photography, articles and blog, and style. I read the SEO article - good info there. I have assumed the Vimeo video block title will carry some weight with Google SEO. We'll see.

PS - I thought I had tried CSS at the page level and it had not worked, but it does and this is the perfect solution to my problem.

Hikin' Mike · November 12, 2015

Thanks for the compliments and glad to help!

As far as SEO, having a great <title> element and text (a good amount of text) is the best. Simply just having a picture, or in your case a video block, with just a title isn't going to carry much weight.

Teetime · November 12, 2015

I guess I spoke too soon about working at the page level. I'm missing something very fundamental here. My test page works fine with the page-level CSS from your post, modified for the four video blocks that it now has.

/* Move Vimeo video block title to below video */
.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {
    position: absolute;
    top: 0;
    width: 22%;
    margin: 260px auto;
    }

Now when I go to one of my real published pages and open it in customize mode I see the above CSS code when I click on the CSS wrench for "Just this page". But it isn't styling the vimeo titles. What gives here? Why would I see another page's CSS code in the code that is just for this page? And where do the code that I want use to style the Vimeo title?

Just when I get cocky and think I am understanding the New SM... well you know.

Hikin' Mike · November 12, 2015

Are you sure you are putting the CSS in a CSS block and not a HTML block?

Can you post a link if you're still having issues?

Teetime · November 13, 2015

Mike, I am now putting the CSS in the page CSS block, but it still isn't working for me. My CSS is not affecting the title at all. I must be doing something silly. Maybe this screen shot will help you see what it is.

Hikin' Mike · November 13, 2015

Do you have a link?

Teetime · November 13, 2015

Here you go Mike: http://www.takeonesolutions.com/Services/Celebrations

Allen · November 13, 2015

Teetime wrote: »

Mike, I am now putting the CSS in the page CSS block, but it still isn't working for me. My CSS is not affecting the title at all. I must be doing something silly. Maybe this screen shot will help you see what it is.

In your screen shot CSS I see */ ... /* instead of /* to start a comment block.
A comment block should be /* ... */

Teetime · November 13, 2015

Thanks Allen. I corrected that but still not getting anything. I left my CSS in the published version so you can see it, but removed the test title.

Hikin' Mike · November 13, 2015

I'm not seeing any video titles.

Teetime · November 13, 2015

Hikin' Mike wrote: »

I'm not seeing any video titles.

I didn't put the titles in since I'm published now and I couldn't get them to display properly. But I'll go ahead and add test titles to each so you can see what isn't happening.

Hikin' Mike · November 13, 2015

Try this instead:

.sm-user-ui .sm-page-widget-vimeo {
    height: 300px;
    }

.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {
    position: absolute;
    width: 31%;
    margin-top: 220px;
    }

You may need to add more 'height' and 'margin-top' if your titles are longer.

Teetime · November 13, 2015

Hikin' Mike wrote: »
Try this instead:
.sm-user-ui .sm-page-widget-vimeo {
    height: 300px;
    }

.sm-user-ui .sm-page-widget-vimeo .sm-page-widget-content .sm-page-widget-header {
    position: absolute;
    width: 31%;
    margin-top: 220px;
    }
You may need to add more 'height' and 'margin-top' if your titles are longer.

Mike, they look reasonable on a full monitor but they don't hold their relative position when resizing to smaller devices. I left the "real" titles in so you can look at them.

Hikin' Mike · November 14, 2015

Teetime wrote: »

Mike, they look reasonable on a full monitor but they don't hold their relative position when resizing to smaller devices. I left the "real" titles in so you can look at them.

Those titles are all on one line, so you shouldn't need the code. That said, I created a test page and added five video (You-Tube) blocks (http://gallery.imagesinthebackcountry.com/Gallery-Examples/Video-Blocks). I added this:

.sm-user-ui .sm-page-widget-youtube .sm-page-widget-header {
    height: 125px;
    }

@media only screen and (min-width: 601px) and (max-width: 800px) {
    
    .sm-user-ui .sm-page-widget-youtube .sm-page-widget-header {
        height: 150px;
        }    
    
}        
    
@media only screen and (max-width: 600px) {
    
    .sm-user-ui .sm-page-widget-youtube .sm-page-widget-header {
        height: auto;
        }    
    
}

I set two different break-points so the titles re-size properly. Depending on your font and/or size, you may need to adjust the height. If you're using vimeo change 'youtube' to 'vimeo'.

Teetime · November 14, 2015

Mike, this works. I see that you are now allowing the title to reside above the player, and resizing is perfect. All of the players remain perfectly aligned vertically when resizing which is not the case with the stock titles. What you have now is perfect for me and I really appreciate your effort!

Vimeo video block title resize problem

Comments