FitMyVideo is fully responsive and will run on all modern desktop- and mobile browsers with no additional plugins.
You can see a live preview here: FitMyVideo Responsive Video Embeds Preview
FitMyVideo needs following components to work:
Make sure you include the following CSS code on your website.
/* FitMyVideo */
.FitMyVideo-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.FitMyVideo-container iframe,
.FitMyVideo-container object,
.FitMyVideo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Place following HTML Code directly in your HTML <body>.
<!-- FitMyVideo -->
<div class="FitMyVideo-container">
<iframe src="http://player.vimeo.com/video/30421472?title=0&byline=0&portrait=0" width="546" height="307" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
The DIV FitMyVideo-container is the responsive container for the video. You can also place it inside another DIV if you like.
The video embed code will then be placed inside the FitMyVideo-container DIV. That is all.
Please support humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website.
FitMyVideo: https://github.com/niklausgerber/FitMyVideo
Niklaus Gerber
Twitter: @niklausgerber
URL: https://www.niklausgerber.com
Location: Zürich, Switzerland
FitMyVideo by Niklaus Gerber is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at github.com.
If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.
I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points. Please donate.