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 otherwise. This landing page involves an auto-starting YT video.

Without setting specific sizes, is there a way to auto-scale YT videos to mobile? I'm very new to mobile space. Are here CSS directives for scaling for mobile?

回答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 below fluidvids.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:

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

来源：https://stackoverflow.com/questions/35413475/how-to-resize-a-youtube-video-on-mobile-inside-of-a-div

标签

html

css

mobile

youtube