Some website building tools will do this for you automatically (such as Squarespace), and others require manual code to achieve. For those needing to code it manually, we have provided it below.
Include this code in the <head> section of your page (or in the css file without the <style> part):
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
If your video is not 16:9 ratio, you would need to modify the padding-bottom in the code above. Simply take the (height / width) x 100 to get the padding-bottom percentage.
Then use this code when placing your video (replace url with yours) in the <body> section of your page. Notice the iframe does not have a width or height specified:
<div class="videoWrapper">
<iframe src='https://mediazilla.com/hnsm303P1' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Comments
0 comments
Please sign in to leave a comment.