jeffehobbs / embedresponsively Goto Github PK
View Code? Open in Web Editor NEWEmbed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds.
Embed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds.
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.
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>
I generated this code with this example video
The video always starts playing at the beginning:
<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.youtube.com/embed/Nmmsl2X_--U?start=18s' frameborder='0' allowfullscreen></iframe></div>
I expected the video to start playing at 18s.
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:
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...
This is a great tool!
Could you add support for Bandcamp?
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.
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
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
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>
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:
<iframe height='160' width='300' frameborder='0' allowtransparency='true' scrolling='no' src='http://www.strava.com/clubs/mbro35/latest-rides/92d67763af86a756976e2d4a221f1eea915f6611?show_rides=false'></iframe>The Activity widget:
<iframe height='454' width='300' frameborder='0' allowtransparency='true' scrolling='no' src='http://www.strava.com/clubs/mbro35/latest-rides/92d67763af86a756976e2d4a221f1eea915f6611?show_rides=true'></iframe>I have two main problems:
Hope you can help?
Best regards
If you put multiple embeds on one page, the styles overwrite each other. Can we have UIDs for each embed?
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.
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
First, thanks for this code, it's works nice.
I want embed soundcloud urls, how I can do this?
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!
Can you please provide support to embed Google Drive documents responsively???
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!
Can you support youtube clips?
It would be great to add blip.TV as one of the services as well.
http://instagram.com/p/bWaCmcghHO/ is a valid Instagram URL, but if I were to do the following:
It shows:
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:
<style>.embed-container {position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>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!
Would not give an embed of https://mapsengine.google.com/map/edit?mid=zaZ5eNOu4pyE.k-9nP6tDwSp4. Perhaps it does not work with mapsengine?
Black bars not shown in original Vimeo video: https://vimeo.com/92765151
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!
Anders Andersen and Niklaus Gerber websites are down.
Can we get URLs updates to follow research in greater detail? Thx.
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!!
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.
I can't see any license information in this project. What license is it under?
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 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'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
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!
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!
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,
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).
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...
Ta.
Documentation: http://getbootstrap.com/getting-started/#third-parties
Test case: http://jsbin.com/aZehICAG/1/edit
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.