My browser extension "opens" but does not display on webpages with frameset.
Example: Go to this example: https://www.w3schools.com/TAGs/tryit.asp?filename=tryhtml_frame_cols And replace the code with the following:
<frameset cols="25%,*,25%">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</frameset>
Notice the iframe does not show up. However, if you change the frameset tag to div tag then the iframe will display.
The frameset tag can only hold frame elements, not iframes. To use iframes, you can create a similar layout using div tags and CSS.
Note: frameset is not supported in HTML5 and should not be used.
Related
I am trying to get a video with the video tag to include a fullscreen option in the controls. If I insert a video into a site using the following:
<video controls>
<source src="filename.mp4 " type="video/mp4">
</video>
I do not get the full screen button.
Interestingly when you look at w3schools the example on the page shows the fullscreen but when you click the Try me it does not.
Could it be because the tag is inside an frame? Is there a way around this?
"Could it be because the tag is inside an frame? Is there a way around this?"
Yes that seems to be the cause after some investigation. Putting a <video> tag inside an <iframe> will cause the fullscreen button to disappear in Firefox.
Regarding W3Schools...
The first page creates an actual video tag (see line 1143 of source code).
On the second "Try it yourself" page they're actually creating an iframe (see line 541 of "Try it" page's source code): var ifr = document.createElement("iframe"); etc.
Solution:
In the iframe code, add allowfullscreen, webkitallowfullscreenand mozallowfullscreen.
If using an <iframe> to load another HTML page (which holds the shown <video> code) then try:
<!DOCTYPE html>
<html>
<body>
<iframe width="800" height="600" src="video_page.html" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe>
</body>
PS:
"If I insert a video into a site using the following... [see posted code]"
Your posted code works fine. A <video> tag in a web page should have fullscreen controls. The problem you describe only shows up when using <iframe>.
I tried to include the youtube in an iframe but it appears blank. This is the code I'm checking with
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.youtube.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Why this is happening ? and what should I do to make it work ?
Check your console. It will most likely have a message like:
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Read more about X-Frame-Options here:
The X-Frame-Options response header
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
[...]
SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself.
[...]
In other words [...] if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.
Long story short: Youtube doesn't want you to embed their site (note: I'm talking about webpages here, not video's!) and explicitly set a HTTP header to communicate that to browsers.
If you want to display/embed a video use their code that is below every video under Share ยป Embed.
<iframe width="1280" height="720"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
you can try this one:
<!DOCTYPE html>
<html>
<body>
<iframe allowfullscreen="true" src="http://www.youtube.com/embed/c0MZ2bTtBm0?autoplay=1&autoplay=1" style="width: 100%; height: 100%; opacity: 1; display: block;" class="ms-slide-video"></iframe>
</body>
</html>
I have the following video iFrame embed code on a page on my website (mywebsite.com/page2) - it plays a video that is hosted on an external site (http://wistia.com). I want to be able to send email clients a link to my video on my page (mywebsite.com/page2/mywebsitevideolink) - not a link to the external website, a link that opens up mywebsite.com/page2 and displays the video on my page that you would have to scroll down to see and starts playing it. How can this be accomplished? Thanks.
<p class="rtecenter"><iframe allowfullscreen=""
allowtransparency="true" class="wistia_embed" frameborder="0"
height="480" mozallowfullscreen="" msallowfullscreen=""
name="wistia_embed" oallowfullscreen="" scrolling="no"
src="//fast.wistia.net/embed/iframe/myvideo" webkitallowfullscreen=""
width="640"></iframe></p> "
Modify your p tag to <p class="rtecenter" id="video">and then your link is http://mywebsite.com/page2#video
Hope that this'll help you.
You can also set up a file which displays when you type /page2/mywebsitevideolink and redirects to /page2#video
If you want to link to a certain part of your page, just use an anchor link.
<div name="videopart">
VIDEO HERE
</div>
And for the link: http://yoursite.com/video.html#videopart
And for the player to autoplay, if you are using your video hosting's player, look in teir documentation for how to autoplay. If your just using the html tag, and the word autoplay in the beginning tag.
I have client.jsp page i put following iframe inside it
<IFRAME SRC="<%=filterPath%>" width="100%" height="1811px" id="iframe1" marginheight="0" frameborder="0" ></iframe>
In client.jsp i have link to call other page and from that page i again redirect on client.jsp using following code
redirect
When i look viewsource for the same i found two iframe and code is like
<iframe>
<iframe>
<iframe>
</iframe>
Each time i called client.jsp from other page it creates new iframe
How i rid from this problem ?
You need to load the page in the main window, instead of IFRAME, when redirect is clicked.
You can achieve this by using the following code :
<a target="_parent" href="client.jsp">redirect</a>
If your link is inside of iframe and you load into iframe new client.jsp with other iframe - you will get this. This is ok. Just put at head of iframe this:
<base target="_parent" />
or specify for every link target="_parent":
your link
i've been working on a toolbar at the top of my sample website:
http://theplagueround.com/dev/
but it gets hidden behind any youtube video content. i've seen a post or two about adding parameters to the tag, but youtube is also using iframes now so that doesn't apply.
You may want to try my plugin for Youtube (4000+ downloads so far): Youtube shortcode
No design issues have been reported.
To have a Youtube video appear behind your toolbar, you should add the parameter wmode=transparent to the end of the URL.
So change this:
<iframe width="425" height="349"
src="http://www.youtube.com/embed/H1Opn4DS88k"
frameborder="0" allowfullscreen></iframe>
to this:
<iframe width="425" height="349"
src="http://www.youtube.com/embed/H1Opn4DS88k?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
More here:
http://www.brandondawson.org/web-design/new-youtube-iframe-embed-code-wmodetransparent
If you don't want to hardcode the HTML into your posts, you should use a plugin like the one provided by #Tubal Martin. This has the advantage that if Youtube update their embed code in the future, you should only need to upgrade the plugin to the latest version.