Resize a video and mute it | XM Community
Question

Resize a video and mute it

  • 22 April 2024
  • 3 replies
  • 16 views
P
Badge

Hi! I don’t know html but, I think that is how I will have to fix this problem. I need my youtube videos to be full screen on any device. Here is my current html that makes a tiny strip of the video:

```
<div class="video-container"><iframe align="middle" height="800" src="https://www.youtube.com/embed/N6-2fVsFV8E?feature=sharedmuted="true&quot;video width="100%" height="auto"></iframe></div>

 

And the other html is 

<br><iframe width="100" src="https://www.youtube.com/embed/ndp510VcqVgmuted=&quot;true&quot;" height="260px"></iframe>

 

Can anyone help me resize these and mute the first one?

3 replies

R
Rank
Userlevel 1
Badge +6

@psychdoctrainee 

Mabey this code will work

 

<!-- Mute and make full screen the first video -->

<div class="video-container">

  <iframe src="https://www.youtube.com/embed/N6-2fVsFV8E?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>

</div>

<!-- Resize and mute the second video -->

<div class="video-container">

  <iframe src="https://www.youtube.com/embed/ndp510VcqVg?mute=1" frameborder="0" allowfullscreen></iframe>

</div>

<style>

  /* Style for the video container to make it full screen */

  .video-container {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 56.25%; /* Aspect ratio 16:9 */

  }

  

  /* Style for the iframe to make it fill the container */

  .video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

  }

</style>

In the first video, I've added ?autoplay=1&mute=1 to the YouTube URL to autoplay and mute the video. For both videos, I've placed them within <div class="video-container"> elements and applied CSS to make them responsive and fill the screen.

Nanditha MM
Rank
Userlevel 4
Badge +8

Hi @psychdoctrainee ,

 

To make your YouTube videos full-screen on any device and mute the first one, you can modify the HTML as follows:


<div class="video-container">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/N6-2fVsFV8E?autoplay=1&mute=1&controls=0" frameborder="0" allowfullscreen></iframe>
</div>


<div class="video-container">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ndp510VcqVg?autoplay=1&mute=1&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
 

Thank you!

Nanditha MM
Rank
Userlevel 4
Badge +8

This page may help you

 

Leave a Reply


Terms & Conditions