YouTube iframe 삽입-전체 화면
웹 페이지에 포함 된 양식이 있습니다. 양식 작성이 완료되면 iframe 삽입을 사용하여 YouTube 동영상이 표시됩니다.
YouTube 비디오의 전체 화면 모드로 들어가면 아무 일도 일어나지 않습니다.
중첩 된 iframe의 전체 화면이 상위 iframe의 크기에 의해 제한됩니까?
내가 올바르게 이해하면 두 번째 iframe (youtube 하나)이 포함 된 iframe이 있습니다. 속성을 '상위'iframe에
추가해보세요 allowfullscreen.
전체 브라우저 지원의 경우 다음과 같이 표시되어야합니다.
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
React.JS People, 기억 allowFullScreen하고frameBorder="0"
낙타 케이스가 없으면 반응이이 태그를 제거합니다!
allowfullscreen="allowfullscreen"YouTube 삽입 유형을 추가 하고 변경하여 문제가 해결되었습니다.
"부모"iframe에 allowFullScreen 속성을 추가해야했습니다. 속성의 경우는 중요합니다. Firefox 또는 Edge / IE11에 브라우저 별 allowFullScreen 속성이 있다고 생각하지 않습니다. 따라서 다음과 같이 보입니다.
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
HTML5에서는 다음을 사용하십시오.
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />
이 속성은 true프레임의 Element.requestFullscreen()메서드 를 호출하여 전체 화면 모드로 프레임을 배치 할 수있는 경우 로 설정할 수 있습니다 . 설정하지 않으면 요소를 전체 화면 모드로 전환 할 수 없습니다. Mozilla 문서 보기
에서 React.js 프레임 워크 를 사용 속성 allowFullScreen.
다른 방향을 가리키는 더 많은 답변이 있으므로이 게시물이 최신 유효한 접근 방식으로 언급 된 모든 것을 통합하고 단순화하기를 바랍니다.
가장 좋은 방법 이 간단한 코드를 사용하여이를 달성 할 수있는 가장 쉬운 일 :
<iframe id="player" src="URL" allowfullscreen></iframe>
문제없이 모든 브라우저에서 테스트되고 작동합니다.
감사합니다
@ orangecoat-ciallella라는 사람 덕분에이 페이지에서 저에게 도움이되는 솔루션을 찾았습니다.
https://www.drupal.org/node/1807158
Ubuntu의 Chrome 브라우저에서 "전체 화면"버튼이 작동하지 않았습니다.
D6에 media_youtube 모듈을 사용하고있었습니다. iframe에서는 //www.youtube.com/v/videoidhere 패턴의 동영상 URL을 사용했습니다.
테마 전처리 기능을 사용하여 출력하도록> //www.youtube.com/embed/videoidhere 즉시 전체 화면 버튼이 작동하도록 허용하기 시작했습니다.
간단히 말해 문제가있는 경우 YouTube URL에서 / v /를 / embed /로 변경해보세요.
추가 allowfullscreen해도 도움이되지 않는 경우 &fs=0iframe URL에 없는지 확인 하세요.
중첩 된 iframe 내부에서 가장 바깥 쪽 iframe 뒤에 삽입하면 문제가 해결되었습니다.
var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />', {
src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
}).attr({'allowfullscreen':'allowfullscreen', 'frameborder':'0'
}).addClass('youtubeIframe')
.css({
'width':'675px',
'height':'390px',
'top':'100px',
'left':'280px',
'z-index':'100000',
'position':'absolute'
}).insertAfter(outerFrame);
이 작업을 수행하는 비교적 깔끔한 방법을 찾았습니다. 작동하는지 확인하려면 내 웹 페이지 ( http://developersfound.com/yde-portfolio.html)를 클릭 하고 'Youtube Demos'링크 위로 마우스를 가져갑니다.
다음은이 작업을 아주 쉽게 수행 할 수있는 방법을 보여주는 두 가지 스 니펫입니다.
나는 iFrame으로 이것을 달성했습니다. 이 DOM이 iFrame의 소스 인 'yde-home.html'이라고 가정합니다.
<!DOCTYPE html>
<html>
<head>
<title>iFrame Container</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">.OBJ-1 { border:none; }</style>
<script>
$(document).ready(function() {
$('#myHiddenButton').trigger('click');
});
</script>
</head>
<body>
<section style="visibility: hidden;">
<button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;");">View Full Screen</button>
</section>
<section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;">
<iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;"
class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;">
</iframe>
</section>
</body>
</html>
이것이 iFrame을로드하는 DOM이라고 가정합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Full Screen Youtube</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {});
</script>
</head>
<body>
<iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;">
<p>Your browser does not support iFrames</p>
</iframe>
</body>
</html>
또한 W3c Validator에 대해 이것을 확인했으며 오류없이 HTML5의 유효성을 검사합니다.
It is also important to note that: Youtube embed URLs sometimes check to see if the request is coming from a server so it may be necessary to set up your test environment to listen on your external IP. So you may need to set up port forwarding on your router for this solution to work. Once you've set up port forwarding just test from the external IP instead of LocalHost. Remember that some routers need port forwarding from LocalHost/loopback but most use the same IP that you used to log into the router. For example if your router login page is 192.168.0.1, then the port forward would have to use 192.168.0.? where ? could be any unused number (you may need to experiment). From this address you would add the ports that your test environment listen from (normally 80, 81, 8080 or 8088).
Noticed mine worked on chrome. Got it to work in Firefox by going to <about:config> and setting full-screen-api.allow-trusted-requests-only to false.
After full screen worked once, I could set that back to true, and full screen still worked which was quite perplexing.
참고URL : https://stackoverflow.com/questions/27723423/youtube-iframe-embed-full-screen
'Program Club' 카테고리의 다른 글
| 파이썬에서 부호있는 정수를 부호없는 정수로 변환하는 방법 (0) | 2020.11.26 |
|---|---|
| 항목을 눌렀을 때 탐색 창을 닫는 방법은 무엇입니까? (0) | 2020.11.25 |
| Angular 2에서 Bootstrap navbar "활성"클래스를 설정하는 방법은 무엇입니까? (0) | 2020.11.25 |
| JavaScript 배열 또는 해시 테이블에 동적 키, 값 쌍 추가 (0) | 2020.11.25 |
| SQL Server : 잘못된 열 이름 (0) | 2020.11.25 |