enter image description hereWhy not play iframe video in mobile.And how to play video in loop.Can somebody tell me where i wrong.
This is my code.
<div id="player"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/MquYqKctLe8?&autoplay=1&loop=1&rel=0&showinfo=0&iv_load_policy=3&playlist=MquYqKctLe8" frameborder="0" allowfullscreen></iframe></div>
Related
I need to create a button to mirror a vimeo video and another one to come back to normal view.
I have been trying using
transform: scaleX(-1)
but its not working
I will appreciate any help Thanks :)
Try adding !important totransform: scaleX(-1). Or,
This Answer might help you but if you want to mirror the Vimeo video then you will have to mirror the whole Vimeo Video iframe.
<iframe id='VimeoVideo' src="https://player.vimeo.com/video/253989945?h=c6db007fe5" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button onclick='document.getElementById("VimeoVideo").style.transform = "scaleX(-1)"'>Mirror Video</button>
<button onclick='document.getElementById("VimeoVideo").style.transform = "scaleX(1)"'>Back To Normal</button>
i have a playcanvas experience made and hosted on a link. which uses gyroscope for vr experience. if i open the link directly in android device. it's working with gyro and all.
but when i embedd the link in an iframe and open that page in mobile. the gyroscope is not working.
code i used for embedding iframe is :
<iframe id="the_iframe" class="bg" allowvr="yes" allow="vr; xr; accelerometer; magnetometer; gyroscope; autoplay;"
allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0"></iframe>
what worked for me is adding "webxr" to allow list.
<iframe id="the_iframe" class="bg" allowvr="yes" allow="vr; xr; accelerometer; magnetometer; gyroscope; webvr;webxr;"
allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0"></iframe>
although it works for android. not working in ios devices.
I have a div container and Iframe inside. I assigned width=200 and height=200.
when I click on full screen, the video becomes blurry with very bad quality. So, I wanted to see if it is possible to disable full screen on youtube iframe.
"I used ?controls=0 at the end of my url and it resolved the issue."
Your answer doesn't solve the problem, you can toggle full screen also double clicking the video. I tried allowfullscreen="0", doesn't work as well.
The same is for ?showinfo=0; also doesn't work.
?showinfo=0 works only if you change link:
https://www.youtube.com/embed/Di2KMatiGAM?controls=0&showinfo=0
to:
https://www.youtube-nocookie.com/embed/Di2KMatiGAM?controls=0&showinfo=0
Use the iframe tag without allowFullscreen to disable the button on the player, for example:
<iframe src="https://www.youtube.com/embed/12345"></iframe>
To allow fullscreen just add allowFullscreen:
<iframe allowfullscreen="0" src="https://www.youtube.com/embed/#(item.VideoUrl)"></iframe>
when you have a video on youtube you can share it. it also displays an option to embed it.
you probably have a <iframe></iframe> in your code
mine looks like this:
<div class="IFR" alt="-">
<iframe width="560" height="315" src="https://www.youtube.com/embed/AdfFnTt2UT0 rel=0&controls=1&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" donotallowfullscreen>
<p>
Your browser does not support Iframes <br>
I suggest that you use Google Chrome or FireFox
</p>
</iframe>
</div>
the thing that matters here is "donotallowfullscreen".
if you set this to "allowfullscreen" you will be able to use fullscreen.
TLDR: in the Iframe tag where your YT video is located, add "donotallowfullscreen" at the end. and its fixed
I used ?controls=0 at the end of my url and it resolved the issue.
<iframe title="video player" src={videoSrc} allowfullscreen="0"/>
React- Full Screen Fix for youtube API
You can remove the full-screen option from the youtube embed video by using fs parameter in the youtube embed URL
Example:- youtube embed URL https://www.youtube.com/embed/youtubeid
Add query parameter of fs in the above URL
https://www.youtube.com/embed/youtubeid5?fs=0
Special thanks to ecoe
To allow fullscreen in iframe add allowfullscreen attribute in the iframe
<iframe class="iframe-embed" [src]="url_link|safe" allowfullscreen>
</iframe>
My website has a player for multiple videos. I've been adapting the code to use YouTube's iframe API as the player. I can't get the videos to autoplay.
Here's the relevant code:
<body>
<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ? autoplay=1&;enablejsapi=1"
frameborder="0"
autoplay="1"
style="border: solid 4px #37474F"
></iframe>
<div id="player"></div>
<div id="movieButtons" class="movieButtons">
<button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>
The rest is standard YouTube iframe API script. You can see I tried setting autoplay=1 as both an iframe parameter and as part of the iframe src. I've also tried including it in the data in the button. None of these seems to work. The vids load when the buttons are clicked, but they don't autoplay.
It's not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL.
Autoplay Policy Changes
<iframe
id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"
></iframe>
Update :
Audio/Video Updates in Chrome 73
Google said :
Now that Progressive Web Apps (PWAs) are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest.
https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa
mute=1 or muted=1 as suggested by #Fab will work. However, if you wish to enable autoplay with sound you should add allow="autoplay" to your embedded <iframe>.
<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>
This is officially supported and documented in Google's Autoplay Policy Changes 2017 post
Iframe delegation A feature policy allows developers to selectively
enable and disable use of various browser features and APIs. Once an
origin has received autoplay permission, it can delegate that
permission to cross-origin iframes with a new feature policy for
autoplay. Note that autoplay is allowed by default on same-origin
iframes.
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
When the feature policy for autoplay is disabled, calls to play()
without a user gesture will reject the promise with a NotAllowedError
DOMException. And the autoplay attribute will also be ignored.
This code allows you to autoplay iframe video
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
Here Is working fiddle
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
https://jsfiddle.net/YoJey_Thilipan/6naLm0yc/6/
it is working fine with me thanks.
You can use embed player with opacity over on a cover photo with a right positioned play icon. After this you can check the activeElement of your document.
Of course I know this is not an optimal solution, but works on mobile devices too.
<div style="position: relative;">
<img src="http://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
</div>
<script>
setInterval(function(){
if(document.activeElement instanceof HTMLIFrameElement){
document.getElementById('cover').style.opacity=0;
document.getElementById('player').style.opacity=1;
}
} , 50);
</script>
Try it on codepen: https://codepen.io/sarkiroka/pen/OryxGP
For those who are attempting to use autoplay property on mobile view:
Autoplay function for mobile devices is a serious thing and it is disabled for most cases. The various reason includes data usage, spam advertisement, etc.
This is the embeded Code of the file:
<iframe src="https://drive.google.com/file/d/1wdg0Wi7r37NS_DezA_qtlU2FgAAVD_agEw/preview" width="640" height="480"></iframe>
If I use this embeded code The Video having an option with popout (at the Upper Right Corner) and There is no full Screen Mode . Please Help.
In the iframe tag you can add the property allowfullscreen="true"
so that video would be like this
<iframe src="https://drive.google.com/file/d/1wdg0Wi7r37NS_DezA_qtlU2FgAAVD_agEw/preview" width="640" height="480" allowfullscreen="true"></iframe>
Check it and let me know if it didn't work for you.