Anyone know why the black bar appears at the top and bottom of a Vimeo embed?

My container div hasn't been resized yet and the initial size is set to the same aspect ratio as the share embed code when I set the width to 620px eg. 620px x 378px

Is it possible to remove this?

Given a Flickr URL, generate an embed code that's responsive. It looks like you could take what Flickr uses as an embed code as a template, then change the width to 100%, remove the height, and choose an image size, either "large" or "original" based on http://www.flickr.com/services/api/misc.urls.html (probably go with "large", since some original images can be quite big in file size).

This is a great tool!

Could you add support for Bandcamp?

I am trying to hide the video creator username and picture. I am using the code from Vimeo within the Embed Responsively code, and the video works fine, but the custom parameters do not work. I'll likely solve by CSS display:none, but thought I should add it here. I love this tool, I really appreciate you providing it for everyone!

http://instagram.com/p/bWaCmcghHO/ is a valid Instagram URL, but if I were to do the following:

1. visit http://embedresponsively.com/
2. click on "Instagram"
3. click on "Embed" without pasting anything in

It shows:

Hi there! I'm not sure if you're able to help, but I'd love it if you could check over my screenshots and see if you've got any ideas of why I'm having a responsive video issue. I tried embedding a video video into a Wordpress site im currently working on and it keeps snapping to smaller sizes when the browser gets smaller instead of staying fluid. When viewing it on a mobile device or at a mobile size in the browser, it snaps to a tiny thumbnail instead of staying the full width of the screen. Any ideas as to how to fix this on my end?

Here are some screenshots of the issue:

Thanks so much! This code is really great--I appreciate it!!

https://vine.co/v/h9eAhKWzJlv/

I think it's not responsive judging by this article:

http://support.brightcove.com/en/video-cloud/docs/responsive-sizing-video-players

Here is a standard URL, not sure how easy it is for you to parse...

http://bcove.me/c217xgl9

Ta.

Documentation: http://getbootstrap.com/getting-started/#third-parties
Test case: http://jsbin.com/aZehICAG/1/edit

HI

Great utility. Would be great if it included an option to disable Related Videos in youtube. I know I can manually add the code, but I am not sure exactly where to place it and what specific parameters to add

rel=0 should turn it off, and I think it needs ?rel-0 but I don't know where to place it.

Thanks!
Rowby

Black bars not shown in original Vimeo video: https://vimeo.com/92765151

When I use your embed code for videos and place text under the video, there ends up being a large gap between the text and the video. Is there a way to fix this? Attached is a screen shot.

It would be great to add blip.TV as one of the services as well.

I'd recommend changing src attribute from http://www.youtube.com/embed/something to //www.youtube.com/embed/something in order to eliminate issues with videos loading in https:// pages.

I can't see any license information in this project. What license is it under?

Hi,

Your web page is very helpful.
After copying the embed code from your website. I paste to my wordpress website on text editor tab. If i save like this, everything is fine. But if i save on visual tab. Wordpress changes to embed code to something else and video dimensions changes.

Thank you again,

Ali T.

Hi

First, thanks for this code, it's works nice.

I want embed soundcloud urls, how I can do this?

Hi, I stumbled across your amazing online tool and wondered if it would work with my Strava widgets.

I tried to embed the two main widgets but I ran into some problems.

The summary widget:

The Activity widget:

I have two main problems:

1. I think the width of both widgets needs a minimum size value as the information becomes unreadable at a certain point.
2. The activity widget gets cut off along the bottom once it's size begins to decrease.

Hope you can help?

Best regards

Can you please provide support to embed Google Drive documents responsively???

This is a great service. Thanks for setting it up. Using Chrome on an iPhone5, I'm not able to get the generic iFrame to scroll, which is a problem if the iFrame content is larger than the iFrame.

It might help to add something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width : 1024px) {
#genericpreview .embed-container{
-webkit-overflow-scrolling: touch; /iframes should scroll/
overflow-y: scroll; /iframes should scroll, but this rule will cause two scroll bars in chrome on windows/
overflow-x: scroll;
}
}

I'll submit a similar pull request.

Amazing tool. Used it many times.

Any chance of offering the option of the aspect-ratio property approach along the lines of this article?
https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh

<style>
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
</style>

<iframe
  class="video"
  src="https://www.youtube.com/embed/msizPweg3kE"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
  allowfullscreen></iframe>
  

Hey, I was testing the Vimeo video option with a 4:3 aspect ratio video: https://vimeo.com/9414292
When I paste this url into the Vimeo option, it returns a padding-bottom of 56.25%, which should actually be 75%.

Hello!

I created a Tag in Google Tag Manager to track when users watch videos while on my website (to know what kind of content is useful and interesting for my audience). I followed this tutorial and it worked at first:
https://www.glowmetrics.com/blog/tracking-youtube-videos-via-gtm-in-2018-using-new-built-in-youtube-trigger/#gref

But recently I realised the Tag is not working for videos embeded responsively. Any ideas on how Google Tag Manager can correctly identify interactions in this case? Thank you!

BTW, EmbedResponsively is really helpful, thanks for having created it :)

Hi,

Big lover of embed responsively. I use it all the time on my website. However, Wordpress' 3.9 release has completely screwed it up!

Seems the embeds in 3.9 are being stripped by the new Wordpress set-up.

For example, here is a Vine using embed responsively:

Here's what wordpress changes this code to automatically after you've switched between visual/text editor on wordpress:

The same thing happens for Getty Images also (haven't tried Instagram yet)

This is terrible news as I use embed responsively in almost every article that is published!

Hello,

I got the following error today "Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter." It looks like it's due to the apostrophes in location names, coming as ' in the Google Map iFrame Embed are converted back to apostrophes in the Embed Code output. Manually changing it back solves it.

Could this be fixed directly in the application?

Thanks!

Check the image below:

Adding ?logo=0 to the embed URL fixes this issue. I suggest adding that parameter by default.

Embeds should not contain a protocol to make them compatible with https only websites in any browser, e.g.: src='//www.youtube.com/embed/...

Thanks for the great project, helps a lot!

I couldn't find any other mention of this so I thought I would submit.

I added a video to my website (Joomla) yesterday and it works great everywhere but FireFox. It takes up full width, but in FF the video displays really small. Not really sure what's going on with that but thought I would see if anybody else had this issue or a fix.

thanks!

I just found your site and used it because one of our journalists was embedding their Instagram videos using their really wonky embed code. Fantastic resource, and I don't have to code anything to make it easier for our reporters to embed things nicely.

One request though, could you make a bookmarklet to automatically take the current url and make your responsive embed code from it? That would be pretty legit.

Thanks for the good work!

Hi there! Thank you for a great service!
When i embed this withe generic iframe: iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FH%25C3%25A4lsingg%25C3%25A5rdsskolan-F-9%2F242948445842431%3Ffref%3Dts&width=240&height=340&colorscheme=light&show_faces=true&header=true&stream=false&show_border=false&appId=784540038246707" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:340px;" align="right" allowTransparency="true"></iframe

It looks perfect in prewiev, but when embed on my site it cuts some oft the embed at bottom. Do you know why? Regards!

Anders Andersen and Niklaus Gerber websites are down.
Can we get URLs updates to follow research in greater detail? Thx.

If my video is on any of these platforms but not the standard aspect ratio, it'd be nice to be able to enter in the dimensions and have the simple math calculated for me.

If you put multiple embeds on one page, the styles overwrite each other. Can we have UIDs for each embed?

Hi,

You fixed the product of major commercial platforms for free.

You made my life easier.

First of all, thank you!

I would like "to make a statement with my wallet".

I would like to back this "thank you" with a donation.

Therefore I am suggesting that this option would be offered on the embedresponsively site.

Hi Jeff,

Not a big deal, but I noticed that FB is displaying extra content. This is an article in a Joomla site:
http://mercurycrossfit.com/about/blog/140-david-after-six-months-of-crossfit

This is what comes up in FB:

.embed-container .embed-container iframe, .embed-container object, .embed-container embed "I've been doing CrossFit for about five or six months now and I feel amazing. I've lost quite a bit of body fat, and I've seen such improvement,...

Normally this isn't a big deal since users can edit...but with some of my clients who are less technically inclined...you know.

Just thought you wanted to know...

Hi there. I used your VIMEO embed code in my website, but it doesn't appear to be loading anything. Are there other factors at play that are required to get the video to load?

Thanks!

https://stable.stable-demos.com/

Generated Code:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/285129141' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

I'd love to see the new embedded Getty Images (http://www.bjp-online.com/2014/03/getty-images-makes-35-million-images-free-in-fight-against-copyright-infringement/) work responsively,

Would not give an embed of https://mapsengine.google.com/map/edit?mid=zaZ5eNOu4pyE.k-9nP6tDwSp4. Perhaps it does not work with mapsengine?

I just tried to embed a video[1], and saw the following error:

1. https://vimeo.com/65303694

I got this URL from the Share button on google maps

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12271.787264452325!2d-75.5890157!3d39.7408455!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xda3faaeb4c91bfdf!2sAngerstein&#39;s+Building+Supply%2C+Fireplace+and+Lighting+Center!5e0!3m2!1sen!2sus!4v1517434233901" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

embedresponsively returns this

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12271.787264452325!2d-75.5890157!3d39.7408455!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xda3faaeb4c91bfdf!2sAngerstein's+Building+Supply%2C+Fireplace+and+Lighting+Center!5e0!3m2!1sen!2sus!4v1517434233901' width='400' height='300' frameborder='0' style='border:0' allowfullscreen></iframe></div>

Google shows this in browser: The Google Maps API server rejected your request. Invalid request. Invalid 'pb' parameter

I'm guessing its due to embedresponsively changing things like Angerstein's to Angerstein's

If I use embedresponsively's style and div and the original iframe, it seems OK