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>
Related
I'm building a website by V2 Docusaurus.
I want to embed a youtube video into the page. I want the width of the frame to be 100% of the page. I tried a lot of solutions, but have not found the perfect one. At the moment, i'm using the following code:
<iframe width="675" height="380" src="https://www.youtube.com/embed/_AQXQDjw7Y8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
It works well in desktop, but i realize that it does not work well in phone:
Does anyone have any idea?
Not a Docusaurus-specific issue.
<iframe width="675" ... />
You're hardcoding a width value which is larger than most mobile device widths, so that's expected. See how the Flux docs does it in https://github.com/facebook/flux/blob/master/docs/In-Depth-Overview.md.
Perhaps setting the width to 100% instead of 676 didn't work when the question was asked but it definitely works today.
Loop feature is not working.Example
Only a playlist can loop.
As such, there is a workaround by creating a playlist of the video.
https://www.youtube.com/embed/X03jlFijeQ0?playlist=X03jlFijeQ0&autoplay=1&controls=0& modestbranding=1&rel=0&showinfo=0&loop=1
You are welcome to test and play with it here
Also note that you need to set rel=0 as well.
Here is the iframe tag you can use, this is just your video in 'VIDOE_ID' & put repetable video id in 'REPEAT_VIDEO_ID_AGAIN'. It will work 100%.
<iframe width="600" height="315" src="https://www.youtube.com/embed/VIDOE_ID?rel=0&controls=1&showinfo=0&autoplay=1&loop=1&iv_load_policy=3&playlist=REPEAT_VIDEO_ID_AGAIN" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
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.
I have a tumblr with many YouTube video posts. I am wondering how I could use CSS to select the {Video-400} post code and hide the automatic controls that show up on the video.
Here is an example of the automatic controls/visible title I am referring to. They only go away once you play the video: http://jaspingo.tumblr.com/post/105022194129/lol-that-last-one-though.
Also, here are a couple of CSS selectors that might be of use (I don't know the exact differences between them).
#content .video{
}
.video{
}
#content .video iframe{
}
And below is the corresponding HTML.
<div id="content">
<div class="posts">
{block:Posts}
<div class="entry">
{block:Video}
<div class="video">
{Video-400}
</div>
{/block:Video}
</div>
{/block:Posts}
</div>
</div>
Any help would be appreciated. I need to understand the difference between the CSS selectors to fully comprehend the way the code works. And yes, i have tried custom embed code from YouTube, but the same problem exists.
I don't know how Tumblr does their embeds, but you can grab the embed code from YouTube without the controls. A typical embed code looks like:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A" frameborder="0" allowfullscreen></iframe>
If you want to remove the controls after the fact, you need to add ?controls=0 to the end of the src URL. It becomes:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A?controls=0" frameborder="0" allowfullscreen></iframe>
To demonstrate, here's the same video using the control parameter outside of an embed code.
The only issue you could run into is with Tumblr using the YouTube API to call the video rather than the embed code. In that case, I'm not sure there's much you can do about it unless you have access to the source and the method for pulling the video into your blog.