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.
Related
I am thinking of embedding a couple of iframes in a slide part of an Xaringan HTML presentation. The below code can be used to embed an iframe.
I want to know how I can add a fullscreen toggle in an iframe, so that the URL can be viewed in fullscreen if need be.
How can I do this?
<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/XXX" width="100%" height="100%" frameBorder="0"></iframe>
Since screens come in all sorts of sizes, you may want to consider the aspect ratio. Additionally, you can't use percentages as you did, They can be set as an inline style or separated in style tags. Take a look at this code. You see the width and height with pixel values as attributes, but the percentage is an inline style. I didn't choose this width and height, it's the standard values that YouTube puts in their embed code.
<iframe width="1212" height="682" src="https://www.youtube.com/embed/i8PKI_zJfDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="width:100%; height:100%;" allowfullscreen></iframe>
If I were to reduce the size and still use the percentage inline styles, it will still use full screen. If you want to use percentages, you need both settings—the video's size in pixels and the percentages (should you choose to use them).
<iframe width="404" height="228" src="https://www.youtube.com/embed/i8PKI_zJfDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="width:100%; height:100%;" allowfullscreen></iframe>
The real fun comes from toggling between fullscreen and not!
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>
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 am embedding a youtube video into an iframe. Now the video quality has 2 settings: 360p and 240p. Now Youtube chooses 240 as the default everytime, and it looks crap. How can I change the default quality to be the highest possible, 360p in this case?
I tried setting the parameter ?hd=1 at the end of the video link, but it does not work:
like so:
<iframe title="Evolution of 4 String Quartet on BBC" width="560" height="315" src="http://www.youtube.com/embed/D1GEH6VxQ-k?hd=1" frameborder="0" allowfullscreen></iframe>
Any ideas? Is it even possible?
I also played around with this developer tool from Google, which is quite cool btw, but no luck with the 380p...
https://developers.google.com/youtube/youtube_player_demo
You just want to use vq parameter instead of hd:
<iframe title="Evolution of 4 String Quartet on BBC" width="560" height="315" src="http://www.youtube.com/embed/D1GEH6VxQ-k?vq=medium" frameborder="0" allowfullscreen></iframe>
vq can also be: small, large, hd720, hd1080.
So I used this code rather than the XFBHL/HTML5 code
<iframe src="http://www.facebook.com/plugins/comments.phphref=http://9gag.com/gag/5852530&num_posts=2&action=comment&scrolling=yes&"
scrolling="yes" frameborder="0" style="border:none; overflow:hidden;
width:470px; height:400px;" allowTransparency="true"></iframe>
As you can see I already set scrolling to yes but still the comments are limited to its dimension.Another problem is how can I limit the number of posts? the num_post isn't seem to work in this code.