Vimeo video block title resize problem

Teetime

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

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

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

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

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

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

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

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

Teetime

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

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

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

Teetime

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

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

Hikin' Mike

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

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

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

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

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

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

Do you have a link?

Teetime

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

Allen

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

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

I'm not seeing any video titles.

Teetime

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

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

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

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

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!