• Monday , 20 May 2019

Responsive Video Embeds with Bootstrap 3

Code Canyon
https://i.ytimg.com/vi/oAPdNKTrBYA/hqdefault.jpg



Responsive Video Embeds with Bootstrap 3

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to iframe, embed, and object elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don’t need to include frameborder=”0″ in your frames as we override that for you.
Mohit Manuja

Original source

3d Ocean

Related Posts

22 Comments

  1. Tony Stark
    May 11, 2019 at 15:47

    plz small video 3-4 minte
    and big video very high

  2. Indranil Jana
    May 11, 2019 at 15:47

    sir plugin name pls and how to install it dw cc 2015?

  3. Indranil Jana
    May 11, 2019 at 15:47

    good knowladge

  4. Michel Bourgeois, Licensed Massage Therapist
    May 11, 2019 at 15:47

    Thank you Mohit for sharing with us!!!!! Real good video. Learned a lot today.

  5. JAV CIF
    May 11, 2019 at 15:47

    Thank you, this video really helped me with my university's project

  6. Mayur pujari
    May 11, 2019 at 15:47

    <div class="col-md-12">
    <div class="embed-responsive embed-responsive-16by9">
    <iframe src="https://www.youtube.com/embed/oAPdNKTrBYA" allowfullscreen></iframe>
    </div>
    </div>

    it says file not found ? plz reply.

  7. Sachin Jamdade
    May 11, 2019 at 15:47

    Sir can we add playlist…
    so that the videos will be played one after another…?

  8. L Chris Diaz
    May 11, 2019 at 15:47

    This Video is Awesome! Thank you : D

  9. Dominic Fernandez
    May 11, 2019 at 15:47

    Enjoyed your rendition and TEACHING … well done!

  10. Daryl Quilo
    May 11, 2019 at 15:47

    tnx a lot.. Can I set width and height for a certain video size? Please respond.. badly need your help.. tnx a lot..

  11. Kaustubh Agarwal
    May 11, 2019 at 15:47

    how can i set it as the background for my page?

  12. Severin Simko
    May 11, 2019 at 15:47

    Easily understandable and well shown. Thank you Mohit

  13. Ankan Chakraborty
    May 11, 2019 at 15:47

    Thank you sir. I am a beginner it's really cool.

  14. Ankan Chakraborty
    May 11, 2019 at 15:47

    When i remove hidden-xs it shows.

  15. Ankan Chakraborty
    May 11, 2019 at 15:47

    <div class="container">
    <div class="panel panel-warning">
       
            <div class="panel-heading">
        <p class="panel-title">Responsive video embed 16/9</p>    
            </div><!– End panel-heading –>
            
            <div class="panel-body">
            <div class="embed-responsive embed-responsive-16by9 hidden-xs">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oAPdNKTrBYA" allowfullscreen>                
                    </iframe>
                </div><!– End embed-responsive –>
                <p class="visible-xs hidden-xs">The video has benn removed for extra small size of your browser, so please move on to bigger screen size to view it.</p>
            </div><!– End panel-body –>
        </div><!– End panel –>
    </div><!– End Container –>

  16. Bill Wileman
    May 11, 2019 at 15:47

    Hi, a very good video thank you. I have a little problem.

    I did all the code which worked correctly but wanted to embed several videos in a grid. I installed the code in a col-xs-3, four of which were installed in the same row, but it did not work. Vanished OK at XS but video itself dos not scale in the col-xs-3 at any screen size.

    Any ideas?

  17. Husain Ahmmed
    May 11, 2019 at 15:47

    Thanks brother  🙂

  18. Alex Gallacher
    May 11, 2019 at 15:47

    Thanks, gave me a little more insight into the working of Bootstrap 3. The video was concise, clear and to the point. Thanks again

  19. Lloyd Emokpae
    May 11, 2019 at 15:47

    Cool!

  20. Guglielmo Cornelli
    May 11, 2019 at 15:47

    awesome Mohit! 😉

  21. Atomic Shooter
    May 11, 2019 at 15:47

    Great video. Worked perfect!

  22. AZepTepi
    May 11, 2019 at 15:47

    Excellent Mohit, and rather simple. Where can I find more of your useful videos?

Leave A Comment

You must be logged in to post a comment.