Open Youtube Video With Image on iPhone Safari HTML Page - javascript

Could someone please help me to figure out how to use a placeholder image to open a youtube video on mobile so that if the user clicks the image on the html page in safari on iphone, the video automatically plays fullscreen (note: on iphone the video would automatically go fullscreen in this instance, just as when you click an embedded youtube iframe).
Thank you!

Does the normal syntax below give you some sort of issue? It looks ok on my emulator... :
<!DOCTYPE html>
<html>
<body>
<p>Full Screen</p>
</body>
</html>

Related

Video tag not showing source video on chrome android

I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.

Why PDF not opening in iFrame in Chrome when switched to Mobile Device Mode

This shows the pdf when we open it in browser.
<html>
<head>
</head>
<body>
<iframe src="https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/44678.pdf" width="100%" height="100%" >
</iframe>
</body>
</html>
But when I switch it to mobile view, it DOESNT work.
Steps:
Open Chrome Inspect Window.
Click "Toggle Device Toolbar" icon on the top menu on inspect window toolbar.
Now we can still see the pdf in mobile view.
Once we refresh it, we can NO LONGER SEE pdf.
Why ? I need to iframe the pdf and show it in mobile app in web view.
Is it possible or not ?

Embedded Youtube video Full Screen Works with Firefox But Not Chrome

So I have a problem with using an embedded youtube video.
Here is my iframe code
<iframe width="560" height="370" src="https://www.youtube.com/embed/PrTXCPex_3o" allowfullscreen="allowfullscreen" frameborder="2"></iframe>
As you can see, I am using allowfullscreen, in fact, it works perfectly fine for Firefox. However, when I try it with chrome, it just sends me to the top of the page and freezes up there until I hit the escape key. It is almost like hitting fullscreen is making the browser go fullscreen (Like hitting F11 In windows) instead of the video.
Any help would be greatly appreciated!
Here is a live test website of my project so you guys can test it yourself with multiple browsers.
http://tech-solutions-llc.com
Thanks again!

Make Iframed video auto start in android browser

I have a webpage that has an Iframe that has a source that contains a flash video embedded in it.
If I open it on a android phone the video does not auto start. I have to tap to start the video.
I need to make it autostart. Does anyone know how I can do it. I have no control over the original source of the iframe.
Can anyone help.
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.tvguide.co.uk/tv-stream/?ch=bbc+1" width="1009" height="566">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
If you open this in a browser the video will play. However on an adroid device you have to hit play.
I want it to automatically play.

How to mute the sound of a webpage when viewing through iframe

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<iframe src="https://www.google.com/?gfe_rd=cr&ei=4xVYV-iRE4SEoAPS2YHgAQ"></iframe>
<iframe src="https://www.example.com/"></iframe>
</body>
</html>
In the above code example.com site plays some sound I want to mute that sound. I want to mute the sound only for that site/iframe
Thanks in advance.
To my understanding, browsers don't allow you to interact with the with the DOM of the iframe embedded elements. It's possible that your whole page could be muted, and I'll try to fiddle up that solution, however, since that's not what you need, I guess you're just out of luck. #keziah suggested putting video URL in <video> tags and I am not aware of a better course of action.

Categories

Resources