Reputation: 137
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:
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
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