I have a wordpress gaming site where I wish to embed videos. I wish to embed them using URL's.. EG: This video:
https://xboxclips.com/EGGY+BREAD+1/a880ece5-e801-4a2e-928e-2f4f28c9ce2f
I want displaying on this page: https://www.onelastgo.com/fortnite-videos/
You will see what I'm trying to do if you click the link. However, on mobiles, you can only see the left side of the video unless you scroll across. Is there and easy way to set something to 100% so that it displays 100% of the screen width ? This is what I have so far..
<iframe src="https://xboxclips.com/EGGY%20BREAD%201/a880ece5-e801-4a2e-928e-2f4f28c9ce2f/embed" width="100%" height="400px" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 300px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
I have tried a few plug ins but none of them support the gaming clip URL. If I upload it to YouTube there's probably some nice YouTube plug ins but I thought a simple embed would be handy as I will need to keep changing the clips overtime.
Many Thanks.
Related
I have a long discussion with one person i know.
He insists on using iframes to embed YouTube videos as:
<iframe style=”width: 560px; height: 315px; border: none;” src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
that does work for some videos but not for all.
Youtube provides the following code to embed:
<iframe src="http://www.youtube.com/embed/bla-bla-bla?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
which obviously works fine.
I was trying to find in specification of iframe if width and height are required. And what happens when they are not provided. But could not quite find the information.
Can someone please help me and explain why the first variant does not work always, and one, as far as i understand, is better of with the second variant?
EDIT1:
so the right answer is below. I just want to comment how i got those wrong curly symbols. The guidelines of one WordPress-based site give users these code snippets. That particular web-site (or it's css; or wordpress in general) don't distinguish between curly and straight quotes, always showing curly. THus when user copy-paste the code - it does not work.
Per our discussion in the comments, the problem was caused by the curly quotes in the first example:
<iframe style=”width: 560px; height: 315px; border: none;”
src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
Changing to straight quotes fixed it:
<iframe style="width: 560px; height: 315px; border: none;"
src="http://www.youtube.com/embed/bla-bla-bla?rel=0"></iframe>
It's helpful to validate your HTML using the W3C Validation Service. That would catch this error and many others.
My guess is that youtube accesses the height and width properties using window.frameElement
https://developer.mozilla.org/en-US/docs/Web/API/window.frameElement
They probably do this to adjust the video quality or something.
Those will not be present if you set the width and height using css, and they may encounter an error in their code and not show the video.
So the answer is, no those attributes are not requried, however in this scenario they seem to be.
I can only tell you for sure if you have an example.
I would like to place a static image on top of the YouTube Video Player; however, it appears as if they somehow block this from occurring?
So far I have tried setting the z-index higher than the YouTube player but this does not work.
For example:
<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>
.image { position: absolute; z-index: 10000; }
Your code works perfectly. Just the slash after "../example.png" is unnecessary but it will work anyway.
You should be able to add wmode=transparent to the youtube iframe url. See:
Youtube iframe wmode issue
A working example:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
Notice how the flyout menu overlaps the video iframe.
If that won't work for some reason, you could load the youtube preview image using javascript, then put your overlay on top of that. Only load the real iframe when someone actually clicks the element.
Quick googling finds this on youtube images:
http://www.reelseo.com/youtube-thumbnail-image/
Example from that page of preview image URL:
http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg
I use zurb-foundation to maintain the layout of my website. The home page of that website is rendreded perfectly in Opera 12.14 beside some other pages. However, some pages such as this page has extra blank space on the right on Opera only. I tried to inspect element in the blank extra space, it mentioned to the html tag?!! I copied the html source into my editor (netbeans) to see if there some missing ending tags, but I did not find any of them. My website is rtl. What should cause this issue?
I got the cause of this layout problem in Opera. It is due to soundmanager2. In Opera only it generates a div tag just before the closing body tag as follows:
<div id="sm2-container" class="movieContainer sm2_debug" style="position: absolute; width: 6px; height: 6px; top: -9999px; left: 9999px;">
<embed name="sm2movie" id="sm2movie" src="/quran/themed/slate/js/swf/soundmanager2_flash9_debug.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" haspriority="true">
</div>
Since I don't know how to make Soundmanager2 to stop generating this div, I decided to solve it using CSS as the following:
#sm2-container .movieContainer .sm2_debug{
display: none;
}
However, the above CSS solution fixed the layout issue, but it causes the Soundmanager stop working on Opera! Till this point, I regard this is an answer for my question about the layout.
The Final Solurtion:
from this answer on the official SM2 forum. I have to make a div with an id sm2_container and style it as follows then place it anywhere I want in the source:
<div id="sm2-container" style="width:1px; height:1px; visibility: hidden" class="movieContainer sm2_debug" >
</div>
The real useful style is visibilty hidden because it is just an swf square with white background and I want to hide it.
I've been searching for a while now about how to layer html element over SWF object and at last what i came up to is (according to Abode):-
Internet Explorer : Doesn't support layering at all.
Firefox : Doesn't support layering (But it worked but without transparency).
Chrome : Adobe claims that it is not supported but amazingly it worked fine and with transparency.
Safari(Windows) : Doesn't support layering at all.
safari(Mac OS) : supported.
I know that i can easily set wmode="transparent" or wmode="opaque" an layering will work just fine. but i found out that with SWF object which contains 3D content its wmode must be set to "direct" or "gpu".
if anyone knows any solution to this problem, i would appreciated cause i'm developing a game on flash i want to overlay it with html elements and i didn't found any firm answer whether its possible or not
Thanks in advance
After a few tries I got a solution working on Firefox & IE.
It's kind of dirty but works in some cases.
An iFrame is shown on top of the swf, so you can add your layered html in the iframe.
You can go further and set the iframe into the background, it's just needed to keep the spot clear for the upcoming html.
HTML:
<div class="box">
<iframe src="emptyframe.html" frameborder="0" class="emptyiframe"></iframe>
<div class="content">
Shown on top
</div>
</div>
CSS:
.box { position: absolute; z-index: 100; background: #fff;}
.emptyiframe { position: absolute; width: 100%; height: 100%; border: none; z-index: -1; }
With this solution it's possible to add elements over the flash even with wmode="direct". But you need to keep in mind that the iframe is in the background of the html on top of the flash, so you can not make any transparence.
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;