getbootstrap.com/docs/4.0/utilities/embed/

 

Embeds

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

getbootstrap.com

 

getbootstrap.com/docs/4.6/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

부트스트랩을 활용하면 iframe의 반응형을 쉽게 처리 할 수 있다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

$(document).ready(function () {
    $('.iframe-wrap').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
    $('iframe').addClass("embed-responsive-item");
});

 

'JavaScript > jquery' 카테고리의 다른 글

Vertical Menu (수평 메뉴 버튼 공지사항 롤링)  (0) 2021.03.24
Progress Bar (진행바, 진행률)  (0) 2021.03.22
jquery 모바일접속 체크  (0) 2021.03.04
jquery cookie.js를 이용해서 popup 구현  (0) 2021.03.01
jquery scroll 시 class 추가  (0) 2021.02.26

티스토리툴바