Make Your Videos In The New Video Feature Responsive ( updated: 30-03-17 )

[Bizz ( John )]

UPDATED

Note this is now the new code as the uploaded videos are not in an iframe the first part was affecting the layout slightly for the uploaded videos. This code now checks to see if the video is in an iframe and if so adds a class for the css.

Here is some code to make the videos added to the new video feature responsive in size. This will especially help those videos that have been embeded rather than a link just added.

You can see a demo here: Demo Of Responsive Video

Add some custom code to your site and pages custom code to add a class if iframe exists

<script>
x$(document).ready(function() {
if (x$('.videoDetailPage-video iframe').length > 0) {
x$('.videoDetailPage-video').addClass('iframed');
}
});
</script>

Now add the updated CSS

/* Make video Responsive */
.videoDetailPage-video.iframed {
    margin-bottom: 5px;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.videoDetailPage-video.iframed iframe{
    max-width: 100%;
    height: 100%;
    width:100%;
    position: absolute;
}

Enjoy

John :-)

[Kos]

Nice John.  Thank you!

[Bizz ( John )]

Your most welcome Kos :-)

[Bizz ( John )]

Just updated this code 30-03-17

[⚡JFarrow⌁]

great tip John!

[Bizz ( John )]

Thanks JF, now this is possible for the videos I have added an interesting feature for the activity feed if you want to check it out, still a work in progress but it's getting there. Go to my site and click on a video in the activity feed to try it out.

http://bizzssite.ning.com/

John :-)

[Dan Lee]

Thank you #JohnTheMan. :-)

[Dan Lee]

Does it automatically adjust for mobile phones?

[Dan Lee]

I fix it. I had to remove other CSS code.

[Bizz ( John )]

Yes it does :-)