How to let embed YouTube responsive on the site, when I open I want Width to appear 100%

Navigation
5

I already have several embed on my website however I do not want to go there and change 1 to 1. what I want is a code to change all Iframes , with 100% width and height adjust responsively. 

.conteudo{
  background-color:#f1f1f1;
  width:700px;
  height:700px;
  padding:10px;
}
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc"frameborder="0" allowfullscreen></iframe>
  </div>
</body>
    
asked by anonymous 16.10.2017 / 16:55

3 answers

9

It is not possible with CSS to adjust the video, because the video is in an Iframe, so if you use width: it will adjust iframe, the only way I think it will work is to use Youtube API Iframe

An example using only the Youtube API, without needing to use entire external libraries like jQuery and no need for plugins, each video will have to look like this: p> 

<div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID opcional, não pode repetir]"></div>

<div data-youtube="[ID DO VIDEO DO YOUTUBE]"></div> <!-- sem id -->

<div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID opcional, não pode repetir]"></div>

So with the native JavaScript functions:

  • HTMLElement.dataset
  • querySelectorAll
  • addEventeListner to use with Window resize

I've created this example:

  

The id="" is now optional, if not id will be generated an id in this format: id="youtube-responsive-x" ( x will be a number) 

<!-- sem id -->
<div data-youtube="M7lc1UVf-VE"></div>

<hr>

<!-- com id -->
<div data-youtube="TALH8SsQJp4" id="baz"></div>

<script>
(function (w, d) {
    var iframes = [], genericIds = 0;

    function responsiveIframe(element)
    {
        var originalWidth = element.dataset.youtubeWidth || element.clientWidth;
        var originalHeight = element.dataset.youtubeHeight || element.clientHeight;

        element.dataset.youtubeWidth = originalWidth;
        element.dataset.youtubeHeight = originalHeight;

        element.width = "100%";

        if (originalWidth != originalHeight) {
            element.height = element.clientWidth / (originalWidth / originalHeight);
        } else {
            element.height = element.clientWidth;
        }
    }

    function putPlayer(youtubeId, elementId)
    {
        var player = new YT.Player(elementId, {
            videoId: youtubeId,
            events: {
                onReady: function() {
                    var el = d.getElementById(elementId);
                    responsiveIframe(el);
                    iframes.push(el);
                }
            }
        });
    }

    w.onYouTubeIframeAPIReady = function ()
    {
        //Busca todos elementos com o atributo data-youtube (tem que ter "id")
        var els = d.querySelectorAll("[data-youtube]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];

            if (!el.id) {
                genericIds++; //Incrementa para usar nos elementos sem ID
                el.id = "youtube-responsive-" + genericIds;
            }

            putPlayer(el.dataset.youtube, el.id);
        }

        w.addEventListener("resize", function() {
            if (iframes.length) {
                for (var i = 0, j = iframes.length; i < j; i++) {
                    responsiveIframe(iframes[i]);
                }
            }
        });
    };

    //Injeta a API do Youtube
    var tag = d.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = d.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})(window, document);
</script>
  

Example on Jsfiddle

     

Note: I did not use Stack Snippet because it uses Sandbox and the Youtube API does not work in Sandbox

    
16.10.2017 / 18:19
5

Take a look at this javascript / jquery library, it's used for responsive videos:

link

link

Just look for fitvids.

For the video 100% add in the css an advanced selector "iframe [src *=" youtube ". 

$(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
   $(".conteudo").fitVids();
});
.conteudo{
  background-color:#f1f1f1;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}
iframe[src*="youtube"] {
  width:100%;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc"frameborder="0" allowfullscreen></iframe>
  </div>
</body>
    
16.10.2017 / 17:15
4

Using the fitVids library, you should select via jquery the iframe parent element that will be responsive.

More documentation on usage can be found in the documentation, such as ignoring some elements or selecting specific elements: link

In your code you should import the FitVids.js library and add a line of code. 

$(".conteudo").fitVids();
.conteudo{
  background-color:#f1f1f1;
  width:700px;
  height:700px;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<body>
  <div class="conteudo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-ljBNAt2gwc"frameborder="0" allowfullscreen></iframe>
  </div>
</body>
    
16.10.2017 / 17:36
How to create an infinite array? Execute function after some time