CODEWITHSUNDEEP
javascripthtmlcss
Roni
Roni

Reputation: 137

responsive embedded youtube

I want to have a responsive youtube video on my website. I need it to look good on desktop and mobile. this is the code I try:

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
    <!--Gallery section-->
    <section id="songs" class="gallery main brd-bottom">
        <div class="container">
            <h1>נזילה בגוף - מוראס (אודיו)</h1>
            <div class="iframe-container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/krhum9lNoXw"
                        frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>
                </iframe>
                <h1 class="large list-inline-item">
                    <a href="https://www.youtube.com/watch?v=krhum9lNoXw"
                       class="hover-effect"><i class="icon-youtube"></i> </a>
                </h1>
                <h1 class="large list-inline-item">
                    <a href="https://open.spotify.com/artist/3YX6pjxMfcQ1r2yPJaxpBi"
                       class="hover-effect"><i class="icon-spotify"></i> </a>
                </h1>
            </div>
            <!--End song-->
        </div>
        <!-- End container -->
    </section>
    <!--End gallery section-->

This is how it's currently looking at my website: video not responsive I'm new to CSS and HTML so if I forgot to upload anything, let me know and I'll add it. to see the website I'm working on you can check: http://nhrnhr0.pythonanywhere.com/ Thank you!

Upvotes: 0

Views: 55

Answers (1)

ymz
ymz

Reputation: 6924

From the docs: you should use the player setSize method

If you want this to be done when you resize your page, use the window.resize event (as described in MDN)

In short:

window.onresize = function() {
    // make sure the player variable is global or visible in current scope in your code
    player.setSize(window.innerWidth, window.innerHeight); 
}

Upvotes: 1

Related Questions