Canvas Support

Video Backgrounds Help

10 replies·opened Jun 25, 2021
J
JasonJSWJun 25, 2021

Hi guys, I sent you an email about this but didn't get a response.

I would like to create a new website with this kind of front page: https://www.otherhalfcreative.com/

It has a video playing from streaming service Vimeo, it looks like they used Square space:
<div class="sqs-video-background content-fill" data-config-url="https://vimeo.com/435772701" data-config-playback-speed="0.5" data-config-filter="1" data-config-filter-strength="0">

What is the easiest way for me to achieve the exact same result? None of your templates have much video background options other than HTML 5 video.

I found what I did in the past with Canvas:

<div class="video-wrap no-fv" style="background: url('images/portfolio/coverimage.jpg') no-repeat center center; background-size: cover;">
<iframe src="https://player.vimeo.com/video/177035211?&background=1" width="130%" height="150%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: relative; top: -25%; left: -15%;" class="hidden-xxs hidden-xs"></iframe>
</div>

This was back in 2019, so I'm not sure if it'll still work on the latest version. Would this work on the latest version?

Thanks

S
SemiColonWebSTAFFJun 26, 2021

Hello,

Thanks for your Patience! Our Mailboxes are filtered and we currently reply to Support Questions via our Support Forums.

Currently, Vimeo BG Videos are not included by default and we will definitely try including this in an Update. We recommend using this Plugin: https://github.com/pupunzi/jQuery.mb.vimeo_player but the setup has to be manually by you until we release an Update.

Regarding the Old Codes, you can definitely use the above just with some Class Changes according to updated Bootstrap:

<div class="video-wrap no-fv" style="background: url('images/portfolio/coverimage.jpg') no-repeat center center; background-size: cover;">
	<iframe src="https://player.vimeo.com/video/177035211?&background=1" width="130%" height="150%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="top: -25%; left: -15%;" class="position-relative d-none d-md-block"></iframe>
</div>

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
JasonJSWJun 28, 2021

Hi guys,

This is wonderful and works perfectly! Just was wondering if you can help me with 1 quick fix for the responsive scaling. Is there anyway to make the video scale like this in this website? https://www.otherhalfcreative.com/

I want the video to scale to center without changing the video size, they basically just keep it center and the same size.

Also even in mobile size the video is playing at the 100% size just cropped sides.

Can you please help me achieve this?

This is my current code:

<section id="slider" class="slider-element slider-parallax min-vh-100 dark include-header" style="background-color: #000;">
			<div class="slider-inner">

				<div class="vertical-middle">
					<div class="container center">

						<div class="emphasis-title">
							<div class="fslider" data-easing="easeInOutExpo" data-arrows="false" data-pagi="false" data-speed="1100" data-pause="4000" data-hover="false">
								<div class="flexslider">
									<div class="slider-wrap">
										<div class="slide"><h2 class="fw-bold font-body" style="font-size: 66px; line-height: 1.15;">altercine</h2></div>
										<div class="slide"><h2 class="fw-bold font-body" style="font-size: 66px; line-height: 1.15;">we make
super awesome
videos</h2></div>
										<div class="slide"><h2 class="fw-bold font-body" style="font-size: 66px; line-height: 1.15;">we make
client's projects
prosper</h2></div>
									</div>
								</div>
							</div>
						</div>
						<a href="#" class="button button-border button-light button-rounded" data-scrollto="#section-works" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" style="font-family: 'FuturaPTLight', sans-serif;">View our Works</a>

					</div>
				</div>

				<div class="video-wrap">
					<div class="video-wrap no-fv" style="background: url('images/portfolio/coverimage.jpg') no-repeat center center; background-size: cover;">
					<iframe src="https://player.vimeo.com/video/567741241?&background=1" width="130%" height="150%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="top: -25%;" class="position-relative d-none d-md-block"></iframe>
					</div>
      
                </div>

				<a href="#" class="one-page-arrow dark" data-scrollto="#section-about" data-easing="easeInOutExpo" data-speed="1250" data-offset="65"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

			</div>
		</section><!-- #slider end -->

Thank you!

S
SemiColonWebSTAFFJun 28, 2021

Very Happy to Help! :)

For the Responsive Scaling to work, you must remove the .no-fv Class from the .video-wrap DIV.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
JasonJSWJun 28, 2021

I just tried deleting .no-fv but the video disappears, just becomes a black screen..

Any other solution for this?

Thank you!

S
SemiColonWebSTAFFJun 28, 2021

The Video disappears because of these Classes: d-none d-md-block. Simply delete this from the <iframe> and the Video will display on Mobile Devices. However, unfortunately, regarding the Responsive Scaling, the Video cannot be scaled according to the Original Size. Since we are using Percentage Sizes for the Video, the Video will always resize according to the Viewport. So this is currently not possible/recommended with the current setup. It is more recommended to use the Vimeo BG Plugin for this case.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
JasonJSWJun 28, 2021

Hello, I tried using the JQuery plugin, but it does not work for Mobile and it is reported to not work in some devices...

I would prefer to do it through iframe. It seems so simple, it looks like it works just with a simple code:
https://codepen.io/abennington/pen/ZONqqv

Can I pay you again to help me achieve this?

Thank you,
Jason

S
SemiColonWebSTAFFJun 28, 2021

That's a brilliant way to include this. Thanks for the Source.

Payment is not at all required. Just review us according to what you think about Our Work and Support. Our Team would be grateful. :)

We have already integrated this Vimeo Background for you in the file attached to this reply.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
JasonJSWJun 28, 2021

EDIT: Just saw your response, THANK YOU!! I think that might be it, I will try it right now!

WOW! I almost have it perfectly working, I'm very close I used the code from here
https://codepen.io/abennington/pen/ZONqqv, video is now playing in mobile and the size remains 100% size in any responsive size.

Only problem now is that the Video does not stay in the center when resizing. So when I resize the browser from right to left, the video will crop from right to left, but without remaining in the center like the video here: https://www.otherhalfcreative.com/

Do you know any way I can maintain the video in the center crop?

Thank you

J
JasonJSWJun 29, 2021

IT WORKED!! Thank you so much this is PERFECT

I love you guys thank you so much for your support

Best,
Jason

S
SemiColonWebSTAFFJun 29, 2021

Very Happy to Help! :)

Glad the issues were resolved. We did check the File again that we sent earlier in the day and it appears to be working fine for us even when resizing. The Contents of Video are centered.

Do let us know if you are facing any further issues with this.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard