I need help with resizing video

1

Hi guys, I need to resize video in my tribute page. I’m looking for the best solution for my code to make it responsive and I discovered embed-responsive-item in bootstrap but now I need to resize my video’s desktop resolution. How can I do? Sorry for my english

2

A solution I was able to find quickly, though you can search for and try others:
.embed-responsive-16by9 { padding-bottom: 56.25%; margin-right: auto; margin-left: auto; width: 50vw; }

I inspected the iframe element and found it changed to “.ytp-thumbnail-overlay-image” (ytp = YouTube Player; I don’t completely understand why this happens, but it’s a YouTube effect).
.ytp-thumbnail-overlay-image { width: 50vw; }

I added the second class to the /* THIRD JUMBOTRON */ of your CSS. If you want the video’s width to be 100% again on mobile, you’ll need to add a media query. Something like:
@media only screen and (max-width: 500px) { .ytp-thumbnail-overlay-image { width: 100vw; } }

More about media queries

3

Thank you for your advices! I don’t understand this passage:

.ytp-thumbnail-overlay-image {
width: 50vw;
}

I have to add this code? Where?

Thank you

4

Meantime I tried this solution and it works:

<div class="jumbotron">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ioJuL62afVU" frameborder="0" allowfullscreen>
  </iframe>
</div>

.iframe {
  margin: auto;
}

Is it correct?

5

Now it’s OK for desktop, but try it on mobile, and you’ll see that the iframe is no longer responsive (just by resizing your browser window, you’ll see it hang over the edge of your jumbotron).

FYI (I wish I’d known much earlier): You can use CrossBrowserTesting via CodePen for free!
Upper right corner of pen, Change View -> Open on CrossBrowserTesting, try on variety of desktop and mobile browsers.

You’ll see that your page isn’t responsive, and this is now a topic for you to research further (responsiveness). :slight_smile:

Hint: try adding
margin: 0 auto; padding: 0 auto;
to body selector in CSS.

2 Likes