This is the fancy box code I am using: jQuery(document). See here: – resize the result frame down then back up (The resizing down isn't perfect either to be honest – if anyone has any better ways please let me know – the code is based on this: ) However, resize the window back up and the fancybox stays the same, as does the video. On sizing the window down Fancybox resizes fine, as does the embedded video (using the code below). Update : This article was originally published in 2012 and has been updated to include supporting information.I am unable to get the vimeo embedded iframe to resize properly when resizing the window, using fancybox ( ) Also, the article mentioned above has also been released on CreativeBloq, on Responsive Youtube Embed. Update : This article has been updated to improve the quality since it was published. Check it out in issue # 247, available October 8th 2013. The article is more depth, suggesting some alternatives for embedding responsive videos in your web designs. Net Magazine about the Responsive Youtube Embed and how to make YouTube Videos Responsive. Update: I was asked to write an article for. ![]() Check out our case study for O'neill surfing, which uses Vimeo videos to embed responsive videos that autoplay.Īvex is an NYC Digital agency, that focuses on creating amazing websites and engaging content. We have been exploring different ways to embed youtube videos for responsive design. ![]() Responsive YouTube Video Embed Exampleįor a working example, check out our homepage for embeded reponsive videos. Now, if the responsive YouTube embed worked, your videos should be responsive and ready to view on Tablets and Mobile devices. Note: this responsive youtube embed code has been updated in 2020 to be more compliant and follow best practices for embedding Youtube videos for responsive design. Next, edit add some HTML around your embed code. Padding-top: 30px height: 0 overflow: hidden Awesome! Exactly what we need.įirst you will need to add the following to your style sheet. Paste it inside a post and wrap it in a div tag with a class. The video options you select will appear in this code. Go to your desired YouTube video, press Share’, then click on the Embed tab and copy the iframe code. This will force the embed elements to expand fullwidth automatically. How to make an embedded YouTube video responsive Here’s what you need to do: 1. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. You will need to wrap the responsive youtube embed code with a div and specify a 50% to 60% padding bottom. Here’s how to make a youtube video mobile: Surprisingly, Youtube does not automatically have a responsive embed code. ![]() One would think that videos that with 100% width would automatically resize to the surrounding container. ![]() Therefore, we needed a responsive YouTube video embed code. I wanted to know how to make a youtube video mobile. (uggh!) This looked fine on desktop computers, but pretty much broke the design when viewing on a mobile device. However, when I added the embed code, the video had a fixed height and width. Since this website is fully responsive, I needed the YouTube video to re-size depending on the browser size or device width. I came across a small problem when adding a video from YouTube to one of my blog posts about the Childish Gambino website that we created. Have you ever tried to make a YouTube video responsive? If so, it can be somewhat tricky.
0 Comments
Leave a Reply. |