Setting up responsive videos

Question
1

Setting up my new Sparkle (basic) website was all going great till I tried to embed responsive videos from vimeo and youtube. I have followed the vimeo and youtube instructions and checked out various other tutorials on this subject. for me up till now in Sparkle, vimeo videos appear distorted with a fixed height of 1499pix making it impossible to edit although appearing correct in the preview page. I’ve been messing around with <div style etc in Youtube but with no success. I’d appreciate help. Thanks very much

2

I’m not really sure what you tried by your description. Did you try using Sparkle’s own video element?

3

I clicked on embed in the Insert options and just copied the code into the style window

4

Hi Jon,

Copy the url of your YouTube or Vimeo video and go to this site: https://embedresponsively.com/

Paste in the video url where asked, click the embed button, and then copy the code the site provides you.

Add in an Embed widget to your site page where you want the video to appear and then paste in the code you copied from the site into the Embed widget. Preview the site page and your video should now display in a responsive manner for you.

Let me know your results please. Hope that helps.

Best,
Charlie

1 Like
5

Hey Charlie,

Thanks very much for your help!. I did as you said but I’m afraid I got the same result.
I’ve attached two screen shots that shows the problem. Sparkle is in portrait smart form. In Sparkle it’s shows as an over extended picture of which the height is fixed so I can’t place the videos how I want. In the preview browser though the video looks okay. I have 6 videos which I eventually want to include 16|637x500

00
Screen Shot 2020-01-04 at 14.23.00.png340×687 119 KB
. I was wondering if it’s a limitation with the basic version of Sparkle.

Anyway, if you have any other ideas I’d be very grateful.

Thanks again.

Jon

6

So why not use Sparkle’s built-in video component?

7

Thanks Duncan, I guess I’m not used to web design programmes being made so easy :). That worked perfectly. Problem solved

8

Ha, I have the same problem. I try to overcomplicate things in Sparkle, until I realize Duncan already thought of it and solved it with a single function.