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.
Related
I have one site hosted on Github Pages that successfully embeds a YouTube video. I'm in the process of building a second site for public release and would like to include an embedded video on this as well. The embed works locally so I know my code isn't the issue, but Github refuses to display the video on this second site. More detail below, including specific code.
Site with working Youtube embed: https://greattimeband.github.io
New site (work in progress): https://gr8time.github.io
The old site displays two videos in the lower left, embedded and fully functioning. The second site does not display the video (just under the carousel up top) but seemingly recognizes the element as existing. There are a few variables that may be at play here:
Site #1 was built using Webflow and may have some inherent styling or containers that I am unaware of. I scoured my css for any clues but can't seem to find any. This embed is also pointing directly to a specific video rather than calling upon the "most recent upload"
Site #2 is being built with Bootstrap. The embed is also calling upon the most recent upload on my channel rather than a specific video (so the site should update itself with each new upload).
Either of these factors may be contributing, but I'm wondering why Github does fine with the first example and not with the second. I understand Github Pages may not allow embedding of videos at all, which makes the first example even more interesting. Wondering if there may be an explanation on either side and if my inadvertent success on the first site can be replicated (without using Webflow).
Site #1 embed code (working):
<div class="video-div-block">
<div class="video-row w-row">
<div class="column-5 w-col w-col-4">
<h2 class="heading-2 video">Video</h2>
<div style="padding-top:56.17021276595745%" class="w-video w-embed">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/4PSGaDSS8A4" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div style="padding-top:56.17021276595745%" class="video w-video w-embed">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cV4NthqdXRM" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
Site #2 embed code (working but not displaying):
<div class="video-container">
<iframe src="http://www.youtube.com/embed/videoseries?
list=UUJhHaq56JKvZlAQ32OH71nQ&index=0" frameborder="0"
allowfullscreen>
</iframe>
</div>
The second example displays properly and pulls the correct video locally, but Github refuses to display content. Any help is greatly appreciated!
Please change iframe src http to https like:
<iframe src="https://www.youtube.com/embed/videoseries?
list=UUJhHaq56JKvZlAQ32OH71nQ&index=0" frameborder="0"
allowfullscreen>
I am very ignorant in this area. I wanted to embed a video in my website. I just went on w3schools and copy-pasted the example code.
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
Why does the video than not show in the website? I am using Google Chrome.
EDIT:
The problem was that I was using the real youtube address instead the URL for embedding.
it's actually works perfectly, checkout the other code, may be the iframe is hidden by any other controls
The html box embed feature on google sites is great. Google provides a good example of how to build a 3-slide carousel with text or logos for content. However, I'm struggling with how to add youtube videos to the content.
I've tried putting this in the content section:
iframe width="420" height="315" src="https://www.youtube.com/embed/ski_4N0dfFI" frameborder="0" allowfullscreen>/iframe
but google sites complains that the src tag is not allowed here. I suspect this is some sort of security restriction.
Just try.
<object data="https://www.youtube.com/embed/ski_4N0dfFI">
Cannot load video.
</object>
Or
<embed src="https://www.youtube.com/embed/ski_4N0dfFI">
<center>
<iframe width="420" height="315" src="//www.youtube.com/embed/BrI7VRfqgo4" frameborder="0" allowfullscreen></iframe>
I know its been posted around, but nothing's been working for me at the moment. I have HTML website and trying to put the html video youtube embed code, but its not working for me.
My site is online, very simple html.. And it has http in the video embed code as well..
I tried a lot, but cant get it working in any way.
Regards
You have to enable embedding first before the embed code will work from other websites.
Log in to https://www.youtube.com/my_videos?o=U
Click Edit on the video you want to embed
Click on Advanced Settings in the tab below
Click Allow Embedding to enable it under the Distribution options section.
Click Save Changes to save the new configuration.
Now your embed link is ready to be embedded on other websites!
<p align="left">
<object height="385" width="640">
<embed src="http://www.youtube.com/v/LsEU_93SC4c&rel=0?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="385" width="640">
</object>
</p>
Change the third line to your video number/name.
I don'tknow it it can be of any help.
I needed just the audio, so I changed height to "0" and width to"0" and it works on IE and Firefox.
It doesn't work with Chrome and Opera.
Here the simple link.
Just insert it as it is. I inserted it at the bottom of the page before
or go to my age and see if how it works:
https://www.carniaexpress.com/friuli-per-gruppi/raduno-alpini-triveneto-tolmezzo
If you wish to see the video just change height and width...
I am embedding a video in a wordpress site using iframe. But the video is not shown completely on my page. Only left part of the video is visible. Remaining part is getting cut.
The code I am using is :
<P ALIGN=left><iframe src="http://www.abc.com/embed/B5EECA7CE46B5A09" height="460" width="800" frameborder="0" scrolling="no" marginwidth="10"></iframe></P>
The actual code I got from the site is
<iframe src="http://www.abc.com/embed/B5EECA7CE46B5A09" width="600" height="360" frameborder="0" scrolling="no"></iframe>
So I tried to set the alignment left, set different values for marginwidth but nothing worked. What I should do in this situation?
By default, WordPress doesn't allow you to add some html tags (iframes, style, script...) inside posts or comments. You'll have to install a plugin (like this http://wordpress.org/extend/plugins/easy-iframe-loader/) in order to have iframe in wordpress.
If your blog is hosted in wordpress.com then I'm sorry, AFAIK there is no way to install plugins there.