Skip to main content
O moderador moveu os comentários para o chat
adicionou 437 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICOopcional, PARAnão Opode HTML]"><repetir]"></div>

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[IDYOUTUBE]"></div> UNICO<!-- PARAsem Oid HTML]"></div>-->

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICOopcional, PARAnão Opode HTML]"><repetir]"></div>

O id="" agora é opcional, se não tiver id será gerado um id neste formato: id="youtube-responsive-x" (o x será um numero)

<!-- sem id -->
<div data-youtube="M7lc1UVf-VE" id="foo"><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][id]"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>

Exemplo no JsfiddleJsfiddle

Nota: Não usei o Stack Snippet porque ele usa Sandbox e a API do Youtube não funciona em Sandbox

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>
<div data-youtube="M7lc1UVf-VE" id="foo"></div>
<hr>
<div data-youtube="TALH8SsQJp4" id="baz"></div>

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

    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][id]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];
            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>

Exemplo no Jsfiddle

Nota: Não usei o Stack Snippet porque ele usa Sandbox e a API do Youtube não funciona em Sandbox

<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>

O id="" agora é opcional, se não tiver id será gerado um id neste formato: id="youtube-responsive-x" (o x será um numero)

<!-- 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>

Exemplo no Jsfiddle

Nota: Não usei o Stack Snippet porque ele usa Sandbox e a API do Youtube não funciona em Sandbox

removeu 59 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
<div data-youtube="M7lc1UVf-VE" id="foo"></div>
<hr>
<div data-youtube="TALH8SsQJp4" id="baz"></div>

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

    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;

        console.log(originalWidth, 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][id]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];
            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>
<div data-youtube="M7lc1UVf-VE" id="foo"></div>
<hr>
<div data-youtube="TALH8SsQJp4" id="baz"></div>

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

    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;

        console.log(originalWidth, 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][id]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];
            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>
<div data-youtube="M7lc1UVf-VE" id="foo"></div>
<hr>
<div data-youtube="TALH8SsQJp4" id="baz"></div>

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

    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][id]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];
            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>
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Não é possível com CSS fazer o ajuste do vídeo, pois o vídeo esta em um Iframe, logo se usar width: quem ajustará é o Iframe, a única maneira que penso que funcionará é usar a Youtube API Iframe

Um exemplo usando somente a API do Youtube, sem precisar usar bibliotecas externas inteiras como jQuery e sem necessidade de plugins, cada vídeo vai ter que ficar assim:

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>

 <div data-youtube="[ID DO VIDEO DO YOUTUBE]" id="[ID UNICO PARA O HTML]"></div>

Então com as funções nativas do JavaScript:

  • HTMLElement.dataset
  • querySelectorAll
  • addEventeListner para usar com resize da Janela

Eu criei este exemplo:

<div data-youtube="M7lc1UVf-VE" id="foo"></div>
<hr>
<div data-youtube="TALH8SsQJp4" id="baz"></div>

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

    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;

        console.log(originalWidth, 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][id]");

        for (var i = 0, j = els.length; i < j; i++) {
            var el = els[i];
            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>

Exemplo no Jsfiddle

Nota: Não usei o Stack Snippet porque ele usa Sandbox e a API do Youtube não funciona em Sandbox