The best part is that SuperEmbed.js requires no extra code, so you can just embed the files and let them run. All embedded videos will stretch to fill the main container, while also being flexible enough to resize based on the browser window. However, instead of using a CSS container class, you can use SuperEmbed.js, a free JavaScript library for creating responsive videos. This means developers need to use other solutions to create fully responsive videos. But there’s one pesky challenge when it comes to responsive design: embedded content.Įvery video site from YouTube to Vimeo has a default embed code fixed to a certain size. The modern web is fully responsive and more designers are realizing this every day. Second, you need to add the following styles to your stylesheet. The great resources from Advanced Custom Fields, promoting work from, give us the CSS we need to make all of our embeds responsive – even when the width is defined in an iframe, like with YouTube.įirst, your video or embed needs to be wrapped in a div. That sounds good and all, but 560 pixels is going to be too wide for mobile phones – so anywhere that code exists, it’s going to break the responsive design of that page. You can see the iframe code is setting a width of 560 pixels and a height of 315 pixels. Take a look at the embed code for one of my #JungerExplainsItAll videos: Let’s talk in terms of YouTube videos, which are some of the most common embeds. The most common issue with using oEmbed – especially with YouTube videos – is that the generated code is not mobile responsive. (If you’re interested, there’s a long list of oEmbed-supported outlets here.) Mobile Responsive Embeds: The Code You Need It’s incredibly simple, and saves a ton of work. So rather than having to copy iframe code that YouTube or Vimeo may supply, we can just paste the URL of the YouTube video or the Soundcloud file or the Tweet, and then WordPress will show the actual multimedia. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.Įssentially, what this allows us to do is simply paste the URL of a supported format into our WordPress editor and have the multimedia content automatically embedded. OEmbed is a format for allowing an embedded representation of a URL on third party sites. Like the Open Graph protocol, oEmbed is a technology for sharing and embedding content across platforms. Thankfully, video sites like YouTube and Vimeo, photo sharing sites like Flickr, and audio platforms like SoundCloud can handle the bandwidth and storage needs, while providing easy embedding into your website.īut not all embeds are created equal. Usually, that also meant you’d need the bandwidth and storage to host large files – and if you got hit with a ton of traffic, your server would have to keep up with the demands. You’d have to upload the content to your server and then have the software or WordPress plugins necessary to display the media seamlessly. Embedding multimedia, including photos, videos, and audio content into your website used to be a hassle.
0 Comments
Leave a Reply. |