채택완료

모바일 페이지 유튜브 링크 질문

2019-01-09 (수) 12:52:17 2,647

<iframe width="50%" height="210" src="https://www.youtube.com/embed/V1s0ZuWVed4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
    <iframe width="50%" height="210" src="https://www.youtube.com/embed/1vAdXinH5ck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

소스를 입력하면 유튜브 동영상이 위아래로 나옵니다.

3667124672_1547005857.3016.png

세로로 나오지 않고 가로로 나오게 

3667124672_1547005878.5747.png

이렇게 나오게 어떻게 소스 수정을 해야 하나요?

고수님들 답변 부탁드립니다.

감사합니다.

|

답변 3개 / 댓글 3개

채택된 답변
+20 포인트

https://codepen.io/sinbi/pen/BvPZdp

ps.

모바일은 세로로 각각 큰 화면 추천.

답변에 대한 댓글 1개

답변 감사드립니다. 수정하는대 많은 도움이 됐습니다. 감사합니다.

<iframe width="50%" height="210" style="float:left"

답변에 대한 댓글 1개

답변 감사드립니다.

해결되었습니다. 감사합니다.
2019-01-09 (수) 12:56:12

<iframe width="50%" height="210" src="https://www.youtube.com/embed/V1s0ZuWVed4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display:inline-block;"></iframe><iframe width="50%" height="210" src="https://www.youtube.com/embed/1vAdXinH5ck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="display:inline-block;"></iframe>

이런식으로 해도되고. . 
 


<iframe width="50%" height="210" src="https://www.youtube.com/embed/V1s0ZuWVed4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="float:left;"></iframe><iframe width="50%" height="210" src="https://www.youtube.com/embed/1vAdXinH5ck" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="float:left;"></iframe>


<style>
.you:after{clear:both;content:"";display:block;  }
.you iframe{float:left; width:50%;  }
</style>

이런식으로 float:left 로 해도 됩니다. 

답변에 대한 댓글 1개

답변 감사드립니다.

첫번째 주신 소스는 적용해도 바뀌지 않았습니다.
두번째 주신 소스는 제가 원하는대로 변경 되었습니다.

다시한번 답변 감사드립니다.

답변을 작성하려면 로그인이 필요합니다.