Embed a stackoverflow.com iframe within a jsbin

While exploring code using jsbin, I mistakenly linked the iframe to . When my work in loads, it triggers an alert that redirects back to .

I am unable to figure out how to modify my jsbin code. Is there a solution or should I start from scratch?

Answer №1

Struggling with my browser, I managed to retrieve this valuable information for you. Remember to tread carefully in the future.

HTML

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>Full Screen Example</title>
</head>
<body>
  <button id="fullsc">set source to iframe and take me full screen</button><br><br>

  <iframe id="myvideo" src="http://stackoverflow.com"></iframe>


</body>
</html>

CSS

/* styling to ensure video fills the entire screen on WebKit browsers */
    :-webkit-full-screen #myvideo {
      width: 100%;
  height: 100%;}

iframe{
  position: absolute; 
  height: 100%; 
  width:100%
}

Javascript

var videoElement = $('#myvideo');
var fullsc = $('#fullsc');

// function to toggle full screen mode
function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  // event listener to toggle full screen on pressing Enter key
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

// event handler for the button click to enter full screen mode
fullsc.onclick = function(){
  toggleFullScreen();
};

// set new URL for iframe - currently commented out
/*function setiframeurl(){
  $('#myvideo').attr('src', "http://radbox.me/watch/mobile?c=21&du=35");
}*/

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

JavaScript Regular Expression for separating a collection of email addresses into individual parts

I am very close to getting this to work, but not quite there yet. In my JavaScript code, I have a string with a list of email addresses, each formatted differently: var emailList = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data- ...

Error: The validation process failed due to missing information. The file name and path are both required for validation

In my current project, I am attempting to upload a file from the frontend to the backend and save it. However, I am encountering an error that looks like this: Error The error message is as follows: this.$__.validationError = new ValidationError(th ...

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

What could be causing my scene to fail to render?

I'm attempting to adapt this particular example into CoffeeScript. Below is a snippet of my code: class Example width: 640 height: 480 constructor: -> @camera = new THREE.PerspectiveCamera 45, @width/@height, 10000 @cam ...

Is the Site Header displayed depending on the scroll position and direction of scrolling?

On my website, I have a header that I want to hide when the user scrolls down 100px and show again when they scroll up 50px. I attempted to write a script for this functionality, but it doesn't seem to be working as expected. CSS /* This CSS rule w ...

Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated. Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the ...

Using jQuery to serialize parameters for AJAX requests

I could use some help figuring out how to set up parameters for a $.ajax submission. Currently, I have multiple pairs of HTML inputs (i pairs): > <input type="hidden" value="31" name="product_id"> <input > type="hidden" value="3" name="qua ...

Can you explain the concept of binding and unbinding in jQuery?

Can you explain the concepts of binding and unbinding in jQuery in simple terms for someone who learns slowly? ...

Transmit information using $broadcast when a button is clicked, and retrieve that information using $scope.$on

I am trying to create a function that will broadcast data from the server upon button click, and then navigate to a new route using $state.go('new-route'). In the controller of this new state, I want to retrieve the transmitted data. However, whe ...

What is the best way to retrieve local variables within a React function?

I keep encountering this issue where I get a TypeError saying that the property 'classList' cannot be read for an undefined value, and this error occurs even before the functions are executed. The specific line causing the error is slide[n].class ...

Vue function displays 'undefined' message

Although many posts on this topic exist already, I am struggling to understand what is going wrong (even after searching extensively here and on Google). I have created my interceptor like this, but I keep receiving an error message stating "This is undef ...

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

As I attempt to programmatically scroll a horizontally overflowing div, I am confident that my final code should resemble the following: var $element = $('#widgetRow');//or maybe $('#widgetRow').parent(); //With 1 or more parent()& ...

Unable to display Vue image within v-for loop

I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying. I've been following a tutorial at which suggests specifying the image URLs as links. I've t ...

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

Tips for altering a key within a tree-view:

I am working with a potentially infinite tree-view array: type Tree = { id: number; name: string; email: string; children: Tree[]; }; const tree: Tree[] = [ { id: 1, name: 'Truck', email: '@mail', children ...

Flickering issue with Chart.js chart persists upon reopening the page

Utilizing mustache.js, I am injecting a view file into a designated <div>. Within this view, I have incorporated a canvas element situated inside a specific div, showcasing a chart created with Chart.js. <div> <canvas id="gesundheitsve ...

ProgressMeterJS Plugin - Full-width Progress Bar

I have encountered a question regarding this particular plugin found at: My goal is to adjust the progress bar's width to 100% so it matches the width of its container. So far, I have made modifications to the plugin by changing the following line: ...

Transforming Material UI into a class-based component

How can I transform a React function into a class? I'm having trouble understanding how to adjust const { classes } = props; in a function to work within a class. You can find an example button function from Material UI here: import React from &apos ...

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...