How To Resize A Youtube Video On Mobile Inside Of A Div?

I'm working on a project and using Bulma the CSS frameworkBulma.io and it's pretty sweet so far. The project is a very simple landing page which needs to look good on mobile and o

Solution 1:

Using FluidVids.js. You need to install it like you would install every other JS file.you then call the following code, put this in your body belowfluidvids.js script.

<script>
    $(document).ready(function() {
        fluidvids.init({
            selector: ['iframe', 'object'], 
            players: ['www.youtube.com', 'player.vimeo.com']
        });
    }); 
</script>

This will automatically re-size the iframes, with this configuration it re-sizes iframes that come from both YouTube and Vimeo. If you want to make the iframe a certain size, lets say 90% width, centered. you can wrap the iframe in a div and add css so it is something like this:

.YoutubeEmbedder{
    margin-left: 5%;
    margin-right: 5%;   
}

and in the html file you should have something like this:

<divclass="YoutbeEmbedder"><iframewidth="560"height="315"src="https://www.youtube.com/embed/HICEwPK8DNY"frameborder="0"allowfullscreen></iframe></div><scriptsrc="js/fluidvids.js"></script><script>
    $(document).ready(function() {
        fluidvids.init({
            selector: ['iframe', 'object'], 
            players: ['www.youtube.com', 'player.vimeo.com']
        });
    }); 
</script>