CODEWITHSUNDEEP
iframeyoutubeyoutube-apihtml5-videoembed
Morteza Sahebkar
Morteza Sahebkar

Reputation: 105

How to disable full screen on youtube 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.

Upvotes: 5

Views: 30854

Answers (6)

VIKAS KOHLI
VIKAS KOHLI

Reputation: 8470

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>

Upvotes: 0

Josh
Josh

Reputation: 1267

        <iframe title="video player" src={videoSrc} allowfullscreen="0"/>

React- Full Screen Fix for youtube API

Upvotes: 0

Adam Orłowski
Adam Orłowski

Reputation: 4484

"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

Upvotes: 4

T.Verlinde
T.Verlinde

Reputation: 39

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&amp;controls=1&amp;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

Upvotes: 3

Liam
Liam

Reputation: 5486

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>

Upvotes: 3

Morteza Sahebkar
Morteza Sahebkar

Reputation: 105

I used ?controls=0 at the end of my url and it resolved the issue.

Upvotes: 1

Related Questions