We have the following youtube iframe embedded in our application:
<div class="youtube">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<%# Eval("YouTubeId") %>?autoplay=0&autohide=1&controls=1&loop=0&playlist&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=1&iv_load_policy=1&start=0&theme=dark&color=red&enablejsapi=1&" frameborder="0" allowfullscreen></iframe>
</div>
<div class="poster"><span></span><%# IfImage("Thumbnail",GetBrickImage(Eval("Thumbnail"), "featurevideo", Eval("Title")), "") %></div>
We currently display a thumbnail for the video, when the user browses to the site and they click on the thumbnail to play the video the standard Youtube play button appears which makes the user click again which is very annoying. I changed the autoplay from 0 to 1 which fixed the issue in Firefox, opera, safari, and IE but when viewed on chrome the video starts playing automatically as soon as the page has loaded, but the thumbnail is still visible. So you don't actually see the video you only hear the content, I'm out of ideas on how to get this to work correctly, has anyone come across this? if so how did you fix it?
As far as the Chrome issue goes, I'm a little stumped.
However, when using defered video playing I would load the src of the iframe using javascript when the user clicks the Thumbnail. This way the video won't even load until the user wants to view it, which saves on bandwidth and loading time too.
Related
i have a wordpress website and i am using iframe to embed youtube video. Issue is when i click on fullscreen icon of video, my page with whole content go in fullscreen mode.
Its a weird issue and i have worked hours to solve this issue. Please check this link.
website link
using my code as:-
<iframe width="640" height="360" src="https://www.youtube.com/embed/Di7G4nbpyDg?feature=oembed" frameborder="0" allowfullscreen></iframe>
i know direct website links is not acceptable but this is something need to fix. Any response will be appreciated.
Thanks
On Wordpress use [youtube https://www.youtube.com/watch?v=XX11XX11X]
xx11xx11x is only example.
Wordpress wants to keep sites prtoected from iframes. So you are not able to publish <iframe>s.
Did you got it?
Edit: In your case use: [youtube https://www.youtube.com/watch?v=Di7G4nbpyDg]
like this:
I have no permission to show you the full video link.
I have a page that displays multiple videos using html video tags. The code looks like the below snippet:
<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>
The class is simply a class that dynamically sets the width, height, etc.
The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.
Here is the website with the upside down videos for reference:
http://www.larrykrannich.com/video.html
The videos display upside down locally, on a local server, and hosted on a real server.
Any help would be greatly appreciated.
This is a firefox problem, I have seen that several people have complained over and over about this problem but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use the camera details to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.
you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.
you can do something like this
if ( isfirefox ) {
<video class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
<source src="video-source" type="video/mp4">
</video>
}
also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it
It seems to have something to do with rotation metadata in the video files. The problem can be solved by transcoding and rotating the video. Similar post here
Most likely, you have recorded the video upside down, without realizing it - which can happen, e.g. when using a smartphone-camera.
There are video-players, that auto-correct for such things, which might be, why you didn't realize the video being upside-down.
There is a free Videoplayer called VLC, which you can correct this with by rotating the video.
Get it here and install it, if you don't already have it:
http://www.videolan.org/vlc/
Steps:
Open video in VLC media player
Pause the video, if it's too short to keep running, while you perform the other steps
In the upper menu, navigate as follows:
Tools
Video Effects
In the window, that just opened go to the Geometry-tab and do the following:
Check the box "Transform"
Select "Rotate by 180 degrees"
Your video should now look nice and right side up
To save your changes:
In the upper menu click, navigate as follows:
Media
Convert/Save
Choose, where you want to save the file.
Upload the rotated video in place of the upside-down one.
Now your video should be displayed correctly :)
Here is my embed code:
<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
And here's how it's showing.
The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.
Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image
Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg
I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.
No idea why YouTube decided to do this, it looks horrible.
Try setting the iframe size using css, initially inline like this:
<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.
we were embedding facebook videos in our website using iframe, it was working fine before, but from last few days site is not able to load video. we have tried it with simple web page as well but no luck. below is the code we are using
<iframe src="https://www.facebook.com/video/embed?video_id=video_id" width="650" height="400" frameborder="0" allowfullscreen></iframe>
please let me know if anyone can do a quick help
Just Use this link. It worked for me. "http://www.facebook.com/video/embed?video_id=XXXXXXXXXXXXX";
where XXXXXXXX is your facebook video id.
eg:
Facebook Sample Video:
<iframe src="http://www.facebook.com/video/embed?video_id=10152463995718183" frameborder="0" width="100%" height="100%">
You need to use this link now :)
https://m.facebook.com/video/video.php?v=xxxxxxxx
OLD ANSWER
the problem isnt that the video is not embeded but that it is not in an iframe correctly stretched. Cca a week before facebook has changed the embed link and video is not stretch to screen width and it cant be done in this fashion. I havent find a solution how to fix it yet.
Maybe there is a possibility to gut out mobile version of the video which is even in HTML5 ... problem with that approach is that the video is available only for a limited amount of time (cca 2 hours) .. then the link will expire and you need to click on a facebook video again which will create a different video.
Example here - https://m.facebook.com/story.php?story_fbid=751234308276798&id=643601645706732&_rdr
Try to use this URL: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey
It's better then the embed url. The video fits in viewport.
did you try to embed different video? the video you're trying to embed may have been remove or hide so it can't show on your site. try embeding a sample video. if it appear the problem is on your video.
When the audio completes in the HTML5 version of the SoundCloud widget, the share panel appears and covers the audio waveform. The user can replay the audio; however, the share panel doesn't disappear, nor does there seem to be any way for the user to hide it. Nor is there any way to prevent the panel from appearing in the first place, which is the ideal option.
The "sharing" parameter is set to false in my embed code.
Here is the embed code I'm using:
<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F87283114&buying=false&sharing=false&liking=false&show_artwork=false&download=false&show_user=false&show_bpm=false&show_playcount=false&show_comments=false&color=568ED4&theme_color=DDD9C3"></iframe>
Replicated in Firefox and Chrome.
Again, this is an HTML5 issue only. The Flash version works properly.
Note that a similar issue also occurred but was fixed in the Flash version:
New SoundCloud HTML5 widget animation on track finish