colin.irwin

I think you can see it on the screenshot. That is a version for Vimeo embeds.

I implemented autoplay videos with non standard aspect ratios on this site - https://www.inthewhiteroom.com/#home-about-us You use a video block but rather than inserting the video URL you instead use the Embed Data option to insert IFRAME code. The IFRAME code includes the height and width of the video. It can be larger than the slot it fits within because the surrounding video block sets its actual size.

Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want. .homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }

The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. This is just for the news section, which is a blog. First the JavaScript (this requires jQuery to be installed). Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){ window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>'); } } Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. The second class, .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated. It looks like this: The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. The Custom CSS .pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } } Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly.

Don't claim to be an expert if you're not.

Can you post a link to the page in question?

Try this @sectionpadding: 10px; .index-section:first-of-type .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }

Which template are you using? Can you post a link to your site?

No problem!

Why do you need them?

It's not possible.

I would advise against justifying web text. It's a big usability problem. It makes copy very difficult to read particularly, but not only, for dyslexic readers.