Skip to content

Instantly share code, notes, and snippets.

@pereirawe

pereirawe/Youtube-Embed-Responsive.html

Created March 20, 2021 21:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pereirawe/938a29353fc677a6263fbd9e00762682 to your computer and use it in GitHub Desktop.
Save pereirawe/938a29353fc677a6263fbd9e00762682 to your computer and use it in GitHub Desktop.
Download ZIP
Embed Youtube videos with resposivity
Raw
Youtube-Embed-Responsive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- UTILIZAR ESTILOS DE BOOTSTRAP -->
<link
as="style"
rel="stylesheet preload prefetch"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
>
</head>
<body>
<div id="header">
<div class="container">
<div class="row">
<div class="col-12 my-3">
<h1>NAVBAR DE TU SITIO</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-7">
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/xHwLuKBflKM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="col-md-5">
<h1>CHATBOX</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus repellendus incidunt quaerat esse aliquid, doloremque libero numquam, consequuntur nemo harum eligendi perferendis ab earum nisi ipsa quos sint illo nostrum!
Reiciendis totam delectus illo maxime accusamus nostrum dignissimos adipisci ratione corrupti? Accusamus hic suscipit deleniti necessitatibus molestiae. Quia aperiam tenetur eveniet rerum totam deleniti, aliquid nam ad fugit porro dolorum!</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment