Embedding vimeo video responsive

Kirby 2 Solved ✅
1

Hi,

are there any kirby-specific solutions how to embed a vimeo-video in an responsive format, so that it is nice looking on big and small screens?

2

You could take a look at https://github.com/distantnative/kirby-oembed

1 Like
3

Hi,

should the plugin play the video when working locally with MAMP?
Because it doesn’t in my case. It is responsive, but the video doesn’t play.

4

If you have an internet connection, the video should play locally, yes.

5

I have, it didn’t. Until I put the lazy loading js in. Obviously this is a requirement?

6

According to the readme, lazyloading is an option, not a requirement; but if you set lazy loading to true, you probably have to include the script as well.

7

I didn’t do it on purpose. I had just installed the plugin and tried an embed in the text area of the panel - no play. Anyway, now it does.

8

I think the lazyload option is set to true as default. So without any config changes, you will need the JS part for videos. Otherwise you would need to set the lazyload config option to false.

9

I guess that was the case. So, maybe change the instructions and give a hint that one has to link to the oembed.js in any case.

BTW: It works nicely. What a great plugin! Thank you!

1 Like
10

you could also try: http://fitvidsjs.com

11

Oembed does not require jQuery, while fitvidsjs does. Certainly an alternative if you use jQuery anyway.

12

I use plain CSS to resize the video:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

works the same for Vimeo.

S.

1 Like
13

I used FitVids a lot but the oembed plugin seemed to be a quick solution.
Using the pure css method has the advantage that it should work for google maps iframes as well.

14

it does.

some more chars… http://sventruemper.de/en/blog/fullscreen-background-video-for-getkirby-cms

15

http://embedresponsively.com Maybe this can be useful to someone.

1 Like
16

Will rewrite the README to clarify it :thumbsup: