내용관리 페이지에서 유트브 영상 가로사이즈 문제 질문입니다! 채택완료

행복의길 2년 전 조회 1,960

안녕하세요

내용관리 페이지에서 html 소스에

유트브 공유소스 <p>이렇게 넣으면 반응형 홈피라서 폰에서 가로가 짤리는데요</p> <p> </p> <p>가로를 100%로 놓으면 pc에서 적용이 안되고 작게 나오는데요</p> <p> </p> <p>어떻게 해야 퍼센트가 적용이 될까요 </p> <p>내용관리 페이지에서 답변 부탁드립니다!</p> <quillbot-extension-portal></quillbot-extension-portal> </div>  <div class="mb-6"> <div class="flex items-center gap-2 text-sm"> <i class="fa fa-tag text-gray-500"></i> <a href="https://new-sir.gnuboard.net/questions?s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5" class="inline-block px-2 py-1 bg-qa-btn-primary-bg-light dark:bg-qa-btn-primary-bg-dark text-qa-btn-primary-text-light dark:text-qa-btn-primary-text-dark rounded hover:bg-qa-btn-primary-hover-light dark:bg-qa-btn-primary-hover-dark transition-colors"> #그누보드5 </a> </div> </div>   <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700"> <div class="flex items-center gap-2">  <div class="flex items-center gap-2"> <button id="vote-good-btn" class="px-3 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-qa-btn-secondary-bg-light dark:bg-qa-btn-secondary-bg-dark text-qa-btn-secondary-text-light dark:text-qa-btn-secondary-text-dark hover:bg-qa-badge-adopted-bg-light dark:hover:bg-qa-badge-adopted-bg-dark hover:text-qa-badge-adopted-text-light dark:hover:text-qa-badge-adopted-text-dark" data-wr-id="499290" data-count="0" > <i class="fa fa-heart mr-1"></i> <span class="vote-good-text">좋아요</span> <span class="vote-good-count">0</span> </button> <button id="vote-nogood-btn" class="px-3 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-qa-btn-secondary-bg-light dark:bg-qa-btn-secondary-bg-dark text-qa-btn-secondary-text-light dark:text-qa-btn-secondary-text-dark hover:bg-qa-btn-danger-bg-light dark:hover:bg-qa-btn-danger-bg-dark hover:text-qa-btn-danger-text-light dark:hover:text-qa-btn-danger-text-dark" data-wr-id="499290" data-count="0" > <i class="fa fa-thumbs-down mr-1"></i> <span class="vote-nogood-text">싫어요</span> <span class="vote-nogood-count">0</span> </button> </div>  <button id="scrap-btn" class="px-3 py-2 rounded-lg transition-colors bg-qa-btn-secondary-bg-light dark:bg-qa-btn-secondary-bg-dark text-qa-btn-secondary-text-light dark:text-qa-btn-secondary-text-dark hover:bg-qa-badge-pending-bg-light dark:hover:bg-qa-badge-pending-bg-dark hover:text-qa-badge-pending-text-light dark:hover:text-qa-badge-pending-text-dark" data-wr-id="499290" data-count="0"> <i class="fa fa-bookmark-o mr-1"></i> <span class="scrap-text">스크랩</span> <span class="scrap-count">(0)</span> </button> </div>  <div class="flex items-center gap-2"> <button id="share-btn" class="px-3 py-2 bg-qa-btn-primary-bg-light dark:bg-qa-btn-primary-bg-dark text-qa-btn-primary-text-light dark:text-qa-btn-primary-text-dark rounded-lg hover:bg-qa-btn-primary-hover-light dark:bg-qa-btn-primary-hover-dark transition-colors"> <i class="fa fa-share-alt mr-1"></i> <span>공유</span> </button> </div> </div>   <div class="mt-4 border-t border-gray-200 dark:border-gray-700 pt-4"> <div class="text-sm text-gray-500 dark:text-gray-400"> 댓글을 작성하려면 <a href="/login" class="text-blue-600 hover:text-blue-800">로그인</a>이 필요합니다. </div> </div> </div> </div>  <div class="mt-12 space-y-6" id="qa_answer"> <div class="flex items-center justify-between mb-6 pb-3 border-b-2 border-gray-200 dark:border-gray-700"> <h3 class="text-2xl font-bold flex items-center text-gray-900 dark:text-white"> <svg class="w-7 h-7 mr-3 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> </svg> <span>답변</span> <span class="ml-3 px-3 py-1 bg-qa-btn-primary-bg-light dark:bg-qa-btn-primary-bg-dark text-qa-btn-primary-text-light dark:text-qa-btn-primary-text-dark rounded-full text-sm font-medium">1개</span> </h3>  <div class="flex items-center gap-3"> <label for="qa_sort_select" class="text-sm font-medium text-gray-700 dark:text-gray-300">정렬:</label> <select name="qa_sort_select" id="qa_sort_select" class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> <option value="wr_votes" >좋아요순</option> <option value="lastet" selected>최근순</option> <option value="old" >오래된순</option> </select> </div> </div> <div class="space-y-6"> <div id="answer_499292" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden ring-2 ring-green-500 ring-offset-2 dark:ring-offset-gray-900">  <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 py-3 border-b border-green-200 dark:border-green-800"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-2"> <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> <span class="font-bold text-green-700 dark:text-green-300">채택된 답변</span> </div> <span class="text-sm text-green-600 dark:text-green-400">+20 포인트</span> </div> </div> <div class="p-6">  <div class="flex items-center justify-between mb-5"> <div class="flex items-center space-x-4"> <div class="relative inline-block" style="width: 48px; height: 48px;">  <svg width="48" height="48" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="rounded-full">  <defs> <linearGradient id="grad-avatar-6925afb28490f9.50345807" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:hsl(287, 77%, 55%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(317, 77%, 50%);stop-opacity:1" /> </linearGradient> </defs> <circle cx="50" cy="50" r="50" fill="url(#grad-avatar-6925afb28490f9.50345807)" />  <text x="50" y="50" font-size="45" fill="white" text-anchor="middle" dy=".35em" font-weight="bold" font-family="sans-serif"> F </text> </svg> </div> <div> <div class="flex items-center space-x-2"> <a href="https://new-sir.gnuboard.net/profile/c95abe2b-0d0e-4cf4-87a0-d088f03749d7" class="font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> Feelz996 </a> </div> <div class="text-sm text-gray-500 dark:text-gray-400">2년 전</div> </div> </div>  <div class="flex items-center space-x-2"> </div> </div>  <div class="prose prose-lg max-w-none dark:prose-invert text-gray-800 dark:text-gray-200 leading-relaxed mb-6 qa-content"> <p><div class="video-wrap"> <iframe.....>

이런식으로 처리하시면 화면을 줄여도 반응형으로 처리됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�

행복의길

2년 전

위소스를 내용관리 페이지의 html에 넣어도 적용이 안되서
content 폴더 안에 basic안에 style.css파일에 스타일 부분을 추가해서 적용해도 적용이 안되네요
왜 적용이 안될까요?

Feelz996

2년 전

위 소스를 그대로 넣으셨다면 내용관리에 iframe을 넣으실때 video-wrap으로 감싸셨나요?

감싸셨고 style.css 에 제대로 넣으셨다면 캐시 때문에 제대로 확인이 안되셨을수도 있는데
ctrl+f5눌러서 다시 한번 확인해 보셔야 할듯 합니다.

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

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

로그인

내용관리 페이지에서 유트브 영상 가로사이즈 문제 질문입니다! 채택완료

답변에 대한 댓글 2개

공유하기