Dev Tips

Fluid Device Respsonsive YouTube Videos

Step 1 add this to the head of your document


<style>
    .video-container {
    text-align: center;
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    }
    .video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
</style>

Step 2 add this around your YouTube embed code within the body/content of your document


<div class="video-container">
<iframe src=""></iframe>
</div>

No comments (Add your own)

Add a New Comment


code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.