[twitter-bootstrap] 부트 스트랩을 사용한 반응 형 iframe

Program / 글쓴이

부트 스트랩을 사용하고 있습니다.

2 개 또는 3 개의 iframe 기반 삽입 동영상이 포함 된 텍스트가 있습니다.

이 데이터는 데이터베이스에서 가져옵니다.

이 iframe을 반응 형으로 만들려면 어떻게해야합니까?

예제 코드 :

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

   </div>

</div>

이것은 동적 데이터입니다. 반응 형으로 만들려면 어떻게해야합니까?

답변

옵션 1

Bootstrap 3.2를 사용하면 선택한 반응 형 임베드 래퍼에 각 iframe을 래핑 할 수 있습니다.

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

옵션 2

iframe을 래핑하지 않으려면 FluidVids https://github.com/toddmotto/fluidvids를 사용할 수 있습니다 . 여기에서 데모보기 : http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

답변

제발, 이것 좀 봐, 도움이 되었으면 좋겠어

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>

답변

나를 위해 잘 작동 한 최고의 솔루션은 아래 링크에서 찾은 솔루션입니다.
https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

이 코드를 기본 CSS 파일에 복사하고

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

그런 다음 삽입 된 비디오를

<div class="responsive-video">
    <iframe ></iframe>
</div>

그게 다야! 이제 사이트에서 반응 형 비디오를 사용할 수 있습니다.

답변

따라서 YouTube는 다음과 같이 iframe 태그를 제공합니다. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

제 경우에는 그냥 width = “100 %”로 변경하고 나머지는 그대로 두었습니다. 가장 우아한 솔루션은 아닙니다 (결국 다른 장치에서는 이상한 비율을 얻을 수 있습니다). 그러나 비디오 자체는 변형되지 않고 프레임 만 변형됩니다.

답변

옵션 3

현재 iframe을 업데이트하려면

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

답변

2020 년 8 월 근무

이것을 사용하십시오

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

하나의 종횡비 사용

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

iframe 사용 옵션 내

 <iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>

답변