Hiding Vimeo controls and replacing with play/pause toggle button - javascript

I'm trying to follow this tutorial (http://www.cssplay.co.uk/menu/cssplay-tutorial-vimeo-hide-controls.html) but the fiddle I created with its code doesn't seem to work. I'm not sure what I'm missing.
https://jsfiddle.net/uxhxdcwp/
<div class="overlay">
<iframe src="https://player.vimeo.com/video/134945180?
api=1&player_id=video" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen id="video"></iframe>
<div class="playpause start"></div>

There are a few issues:
You have accidentally left out the closing brackets }); in your script, resulting in an unexpected end of script error
Do not load scripts using <script> tag in your fiddle. Instead, use the external resource panel. However, since the plugin is not served over a secured connection, I have placed the actual plugin code before the start of your JS.
And now it works: https://jsfiddle.net/uxhxdcwp/1/

Related

Fullscreen icon is missing on Wordpress using iframe

I'm creating a Wordpress site using HelpGuru by HeroThemes (https://herothemes.com/)
I added an iframe to show a vimeo video. This is my code snippet:
<div style="padding:55.83% 0 0 0; position:relative;">
<iframe src="(url)" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute ;top:0; left:0; width:100%; height:100%;" title="(title)">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
I removed the original url and title of anonymous reasons.
What I expect, and what I also get when I add this code snippet in any html editor (like W3Schools') is to display the video including a fullscreen button to show the video in fullscreen.
However the button is always missing.
What I tried:
I added allow="fullscreen" (How to enable fullscreen in IFrame) aswell as the allowfullscreen tag (see iframe docs).
In the wordpress preview it also does seem to work. Theres no extra styling added to it.
I also tried to have a look at the iframe with the chrome dev tools, there the buttons' display property is set to "none". However just forcing it to be "flex" is not going to work, as the button would not do anything then.

Activate Autoplay based on allow="autoplay" attribute in iframe - Google Autoplay Policy

I really tried to find an answer but couldn't.
Google have changed their Autoplay Policy .
I am loading an iframe with Src to independent code, like this:
<iframe frameBorder="0" scrolling="no" allow="autoplay"
src="myurl"
width="640" height="480">
</iframe>
myurl is a path the a video player.
I want to check if 'allow="autoplay"' was passed as iframe attribute where the player code is, and the decide if to set auto play or not.
Note, that the site where the iframe is loaded is a different site' with different code and it even sites on a different server then the myurl site.
How can I do it?
It can not been done.
You need to use a promises to check if the auto play succeeded.
I used googles way of doing it.
Hope it will saves some time to someone :)

html getting video from source redirecting me to frontpage

I've been trying to get a videos source from a website and play it in my own application. When I run, it just end up on the front page of that website.
example:
<!DOCTYPE html>
<html>
<body>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="http://vkpass.com/token/bdrxwnlzfjpq/vklhash/Pw7Iy8MztzzwN6xh7nOhf6o80rxCAYIhP8xiQFZ2fGX2.a1aa2ZoFDfJvKt0cycHuydloxHztEjWaRXccGVjbw==?source=v1#" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Am I doing something wrong or is there a way around this?
Delete href="#" from <a> tag.
The website has some sort of anti-embedding script that won't allow you to play the video.
But the answer to stop the redirecting would be to use the sandbox attribute that HTML5 has for iframe objects.
<iframe id="video" width="420" height="315" src="http://vkpass.com/token/bdrxwnlzfjpq/vklhash/Pw7Iy8MztzzwN6xh7nOhf6o80rxCAYIhP8xiQFZ2fGX2.a1aa2ZoFDfJvKt0cycHuydloxHztEjWaRXccGVjbw==?source=v1#" sandbox="" frameborder="0" allowfullscreen></iframe>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
If specified as an empty string, this attribute enables extra
restrictions on the content that can appear in the inline frame. The
value of the attribute can either be an empty string (all the
restrictions are applied), or a space-separated list of tokens that
lift particular restrictions. Valid tokens are:
And one of the options is
allow-top-navigation
[Which] allows the embedded browsing context to navigate (load)
content to the top-level browsing context. If this keyword is not
used, this operation is not allowed.
By excluding this option in the sandbox attribute, it DOES NOT allow redirecting/top-level navigation.
Use video tag instead and remove the anchor tag for play video. Also there is something wrong with the src link of iframe tag, its returning a redirect response instead of video. You can check that by changing the src to the code here and when you download that you will get an HTML page.
<!DOCTYPE html>
<html>
<body>
<video autoplay="true" width="320" height="240" controls loop="true" preload="auto" src="https://s3.ap-south-1.amazonaws.com/habba-cdn/assets/Video/Home-page.mp4"> </video>
</body>
</html>
I'm tried your code in my local and it stops redirecting when i'm including the property sandbox="" as #X33 mentioned and in the console it is showing an error like
Blocked script execution in 'http://' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
This link may help you
stackoverflow Question

Embed Youtube with Captions on by default not working

I'm trying to embed a Youtube movie, and would like Captions to be on by default.
From https://developers.google.com/youtube/player_parameters#cc_load_policy I understand I should use cc_load_policy=1.
I use the code html code below but it doesn't seem to work. That is, it loads with the captions off (you can manually turn captions on, so the video does have captions). What am I doing wrong?
I've tried the following two options:
<iframe src="https://www.youtube-nocookie.com/embed/xxxxxx?rel=0&&showinfo=0&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube-nocookie.com/embed/xxxxxx?rel=0&&showinfo=0" cc_load_policy="1" frameborder="0" allowfullscreen></iframe>
Try adding cc_lang_pref , you wouldn't find in the official docs. but it's required
cc_load_policy=1&cc_lang_pref=en
You can change pref. language as per the locale representation of the language you have put in the video caption

Google Tag Manager invalid template

When I try to publish the google tag it says it is an invalid template, it is a white countdown clock with a transparent background.
<iframe src="http://free.timeanddate.com/countdown/i57ntw7m/n198/cf11/cm0/cu4/ct0/cs0/ca0/co0/cr0/ss0/cacfff/cpc000/pcfff/tcfff/fs100/szw320/szh135/iso2016-11-18T00:00:00" allowTransparency="true" frameborder="0" width="275" height="19"></iframe>
GTM does not consider "allowTransparency" to be a valid attribute. If you remove it you should be able publish your tag as custom HTML.

Categories