Trouble with activating the full screen feature on YouTube embedded in an HTML iframe

I created a website with a YouTube video, and in order to have a separate thumbnail, I used the following code:

<div class="embed-responsive embed-responsive-16by9 youtube" style="height: 130px; width: 240px;  " src="http://molugu.com/yantraev/divayoutubethumb.jpg" id="h4cYkgPnYQk" >

<iframe   src="https://youtu.be/h4cYkgPnYQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe>

</div>

<script type="text/javascript" src="https://codegena.com/assets/js/youtube-embed.js"></script>

Everything is working while playing the video, but when trying to go full screen, it shows that fullscreen option is unavailable. Can someone please advise on how to fix this? Thank you in advance.

javascripthtmljquerycssiframe

Answer №1

What is the purpose of using this particular script?

This script is preventing it from working properly, consider using the following code instead:

<div id="your_id">

<iframe width="240px" height="130px" src="https://www.youtube.com/embed/h4cYkgPnYQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


</div>

Answer №2

Consider using the advanced features of video.js instead of relying on outdated youtube iframe or codegena.

Video.js provides a comprehensive solution for embedding videos from various external sources such as youtube and vimeo into a single player, offering extensive customization options to tailor the player's appearance and functionality.

You can easily implement it with a simple html video tag like shown below:

<video
id="vid1"
class="video-js vjs-default-skin"
controls
width="640" height="264"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/embed/h4cYkgPnYQk"}] }'></video>

For a live demonstration, check out this Codepen example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Comparison of JavaScript speed: Double equals (==) versus triple equals (===)

When writing code in JavaScript, should I be concerned about the performance difference between using a double equals (==) versus using a triple equals (===)? For example, is there any significant impact on performance when comparing variables like if (fo ...

javascriptnode.jsperformancebrowsercomparison

Assigning a price to a list of pizza options within a dropdown menu

//The goal is to assign a numerical price to each pizza in the array. We must maintain the structure of the array within the select form. Next, we need to display it in another PHP file, how do we retrieve the values? <fieldset> ...

phphtmlarraysformsselect

What is the best jQuery library to add to my website?

I have included several jQuery scripts on my website for various functionalities such as sticky header, anchors, and animations. I am wondering if it is necessary to include all of them or if I can just include one or two? Here are the jQuery scripts I ha ...

javascriptjqueryhtml

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

I am looking to efficiently manage localStorage using checkboxes. When a checkbox is checked, I want to add the corresponding value to localStorage, and remove it when unchecked. var selectedModes = new Array(); $('.play_mode').on('click& ...

javascripthtmljquery

Using gmaps4rails: A guide on extracting JSON data from the controller

I have a model named shop and I want to create a simple alert box using JavaScript that shows the name of the shop when a marker on the map is clicked. Here's my code: # controller @json = Shop.all.to_gmaps4rails do |shop, marker| marker.json({ id ...

javascriptruby-on-rails-3jsongoogle-mapsgmaps4rails

What is the appropriate HTML tag to use for content that has been modified (without being added or removed)?

When it comes to identifying added and deleted content, I am familiar with using <ins> for added content and <del> for deleted content. However, what tag should be used to mark content that has changed without specifying what exactly was added ...

html

Techniques for removing a label value using JavaScript

There is a label named "test" being generated from the .cs [C# code] with the text "data saved successfully". However, when I click the save button, I want to clear its text. Currently, I have 3 required field validators with messages [cannot be blank, can ...

asp.netjavascript

Should I use "npm install" or "sudo npm install -g"

When it comes to installing certain packages, sometimes running sudo npm install -g is necessary, while for others simply using npm install is enough. What causes this difference and why does it exist? Take the following examples: npm install -g grunt-c ...

javascriptnode.jsnpmsudo

Creating a line between two points in raphael

Hello there, I'm looking to create a line between two points in Raphael. Could you please provide me with some examples or guidance on how to achieve this? Thanks a lot!) ...

javascriptjqueryraphael

Tips for efficiently loading data as you scroll through a webpage

Is it possible to display a list of values retrieved from a database using the Struts display tag, and have these values load as the user scrolls down the page? The challenge I am facing is: I currently have an action that loads only a small amount of da ...

jqueryajaxscrollstruts2custom-scrolling

input access is granted through the post method using an integer as the name parameter

Suppose there is a dynamic form with multiple fields generated with integer names based on the iteration that creates them. The goal is to retrieve their values using either post or get method (though focusing on post here). Below is the code for generati ...

phphtmlpostinput

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

javascripthtmlcanvas

Entry module could not be located due to an unresolved 'babel-loader' error

As a newbie to the world of React, I found myself facing an issue while setting up the installation and loading all the necessary dependencies. Upon running the npm start command, I encountered the following error message: ERROR in Entry module not found: ...

javascriptjsonnode.jsreactjswebpack

What does getsession.insert in the Ace Editor return?

Seeking clarification on the return values of the addMarker and insert functions in ace editor's edit session. The official documentation lacks detail, leaving me uncertain. Refer to the edit session API for more information. I've encountered i ...

javascriptangularjsnode.jsace-editor

An array containing concatenated values should be transferred to the children of the corresponding value

Consider this example with an array: "items": [ { "value": "10", "label": "LIMEIRA", "children": [] }, { "value": "10-3", "label": "RECEBIMENTO", ...

javascriptarraysjsontreenested

The code provided creates a web form using HTML and ExpressJS to store submitted information into a MongoDB database. However, there seems to be an issue with the 'post' method, while the 'get' method functions correctly

When I try to submit entries (name, email, address) on localhost:3000 in the browser, the 'post' function is not creating an object in the mongo database even though it works from the postman. The browser displays an error message saying "unable ...

javascripthtmlnode.jsmongoose

The arrangement of objects looks distinct once it is shared with the public

After developing a website and debugging it in Visual Studio using the "view in browser" feature, I deemed it ready for deployment onto our test server. However, upon checking the page from the server's address, certain elements appeared differently t ...

htmlcssasp.netbootstrap-modal

Is there a way to deselect a radio button within a group after selecting other radio buttons?

I am facing a problem with a list of values that I need to display as Radio buttons. Each radio button has a value with a specific count that decreases when the radio button is selected. For example, if radioButton1 is selected, its count becomes 1. If ano ...

htmlangulartypescriptradio-button

What is the process for converting a URL or HTML document to a PDF using the html2pdf JavaScript library?

I am working on creating a button that utilizes the html2pdf library to convert an HTML page into a PDF. Instead of selecting an element with query selector or getElementById, I would like to pass a URL because the page I want to convert is not the same as ...

javascripthtmlhtml2pdf

Analyzing: Sending the uploaded file or image to the backend server

Included in my HTML is a form: form.html: <form method="post" enctype="multipart/form-data" action="/"> <input type="file" name="pic" id="imgupload"> </form> <script> document.getElementById("imgupload").onclick = function ...

javascriptnode.jsexpress