Viewing Responsive Vimeo, Youtube etc.
Responsive Vimeo, Youtube etc.
|
User: Roddy 13 years ago
|
|
|
One of the many reasons I don't like to use YouTube, and to a lesser extent Vimeo, is the extra hoops you need to jump through to get them to behave responsively. Have you given any thought to how this would be achieved in EasyWeb? If you already have jQuery included its only one more step to add the jquery.fitvids.js script which works well. This will work for YouTube, Vimeo and Blip.tv if you include the appropriate selector in the javascript setup..... http://fitvidsjs.com My preferred method is to use CSS where the iframe code is placed in a container div with a bottom margin which is set to a percentage. The value of this is adjusted to suit the aspect ratio of the movie. Even I can do the math on that one but EasyWeb could just as easily do it for me! More info... http://amobil.se/2011/11/responsive-embeds/ ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 13 years ago
|
|
|
I was thinking about how to simplify the CSS method for creating a widget to insert responsive Vimeo/YouTube. I removed everything from the iframe code except the URL so that it is the only required user input in the HTML. The only variables in the CSS are the video file aspect ratio and border... .movie-container { margin: 1%; position: relative; padding-bottom: 75%; /* 4/3 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .movie-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /*add this if removed from iframe code*/ } Demo here... http://ezmacwebdesign.com/Demo/vimeo-responsive.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 13 years ago
|
|
|
In contrast to the above, using the fitvids.js requires ... jquery.js fitvids.js The full iframe code The setup javascript with options for adding the custom selector ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |