I want to have a poster image for a youtube video.
So when you click an image, you will autoplay youtube video.
But since I want to remove controller I have to use iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/q6EoRBvdVPQ?rel=0&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Something like this.
And I have several videos to apply, so I wonder how the code including iframe should be.
Thanks !
you can apply this solution I Tried it is working fine
the main idea is you just display you custom poster as following and include the embed as commented code
<div class="video">
<img src="poster.jpg">
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/q6EoRBvdVPQ?autoplay=1&rel=0&controls=0" frameborder="0" allowfullscreen></iframe>-->
</div>
when user click on the image embed of the youtube video injected instead of the image as following
$(function() {
var videos = $(".video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
which is better for performance because embeds won't be loaded until user click it
Related
I want to add youtube video on website. I want, There will have only control panel. and need to hide top title and logo.
But If hide the title, then never hide logo / watermark logo.
But I need to hide twice (title+logo).
How can I do this ?
This is my code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Oo00q-l8VKQ?modestbranding=1&autoplay=0&rel=0&showinfo=0" frameborder="0" allowfullscreen>
</iframe>
Try try this jsfiddle.net
<style>
.video-wrapper {height: 153px; width: 272px; position: relative; overflow:hidden}
#YouTubeVideo1 {height: 262px; width: 272px; position: absolute; margin-top:-55px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper">
<iframe id="ytplayer" type="text/html" width="272" height="252"
src="https://www.youtube.com/embed/M5h3U_nNn3k?autoplay=1&controls=0&fs=0&rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</div>
As you should have read from HERE, it is not possible to remove ALL branding from the player window.
It is a corporate product that they have made. As such they advertise that it is their player (from their site) for their use with sharing functionality for us.
Considering the work that goes into a product like the YT-Player, and that they give us so much access to the api. I think it is reasonable.
If you do not want any branding, you should have your own player and content.
After search on google and Stackoverflow, i can't find any solution. Some people write me saying that the youtube videos embebed on my website, load correctly, but without sound on iPhone5 and some iPad's.
I'm using this embebed iframe:
<iframe class="youtube-player" type="text/html" width="560" height="315" src="//www.youtube.com/embed/n6ro5O1_FEs?ps=docs&controls=1" frameborder="0" allowfullscreen></iframe>
I added
class="youtube-player" type="text/html"
ps=docs&controls=1
Over the normal iframe to improve click response on mobile version, without that, we need do many clicks to play video on mobile.
And this is my website http://goo.gl/oSqMFI
Best regards
Within our web application we are displaying a PDF document in an iframe using the following line of code:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
Does anybody know of I workaround for this problem in Mobile Safari?
UPDATE - MARCH 2013
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
UPDATE - MAY 2015
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
#media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
</div>
</div>
For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
<html><head>
<script>
$(document).ready(function () {
$("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
});
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>
I have been looking and looking for a solution but can not find one to opening
<iframe width="560" height="315" src="http://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>
The reason for wanting to open in this format is the generated image link.
Thanks
instead of use embed code, i use only the embed link that wrap an image so when i click the image a shadowbox popup opens with the video inside
This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.