If a YouTube video is embed in a web page is there a way to have a small size (example 200 x 150) then have it re-size larger (example 400 x 300) when it is played. An example would be when a video is received in Gmail.
You can try binding a click event to the tag that will then resize the element to a larger size, but I'm guessing that the flash video player will hijack the click event and not bubble it up to the DOM.
Otherwise, you can have a poster image placeholder, and when that is clicked, you replace the image with the actual video player at whatever size you want.
You could try to let javascript listen to the player's onStateChange event, when state changes to "1" (playing), you change the width and height to the new size. Maybe something like this could work:
var player = document.getElementById("youtube-player");
function onPlayerStateChange(evt) {
if (evt.data == "1") {
player.style.width = "400px";
player.style.height = "300px";
}
}
player.addEventListener("onStateChange", onPlayerStateChange);
You can play around with the javascript api here: https://developers.google.com/youtube/youtube_player_demo And here is the reference: https://developers.google.com/youtube/iframe_api_reference#Events This assumes it's an embed on your on web page, I don't really get what you mean with "... video is recieved in Gmail".
Related
I want to play YouTube video in specific view size. currently I'm unable to play video in full view size.
You can check the below image where black part is displaying in both left and right side.
First of all, you should set your custom YTPlayerView with content mode equal to "scale to fill". Next, you should set the playsinline property to 0.
Here below I show you a little example:
var playerVars:Dictionary =
["playsinline":"0", // 1 in view or 0 fullscreen
"autoplay":"1", // Auto-play the video on load
"modestbranding":"1", // without button of youtube and giat branding
"rel":"0",
"controls":"0", // Show pause/play buttons in player
"fs":"1", // Hide the full screen button
"origin":"https://www.example.com",
"cc_load_policy":"0", // Hide closed captions
"iv_load_policy":"3", // Hide the Video Annotations
"loop":"0",
"version":"3",
"playlist":"",
"autohide":"0", // Hide video controls when playing
"showinfo":"0"] // show related videos at the end
self.playerView.load(withVideoId: videoId, playerVars: playerVars)
Remember if you want a good resolution inside your view using a 16:9 view when you try to play a 4:3 video you have always black side parts and this behaviour is correct and reasonable.
If you want more specific details about your request you can find interesting information in this page (a page related to the official gitHub Youtube sources)
I'm trying to get my QBRTCRemoteVideoView to present a full-screen video output, similar to FaceTime or Skype.
However, using AutoLayout in my project, and setting the constraints to lead and trail to the superview, the video I get back does not follow those constraints. It shows with black borders on the top and bottom.
Even using the following properties:
videoFormat.width = 320; // or anything
videoFormat.height = 568; // or anything
Does not seem to change the dimensions of the video. Any advice for me here on controlling the video output view?
You can only set a specific width and height for video, to see what kind of video formats are supported by your device, call:
[QBRTCCameraCapture formatsWithPosition:AVCaptureDevicePositionFront];
// or AVCaptureDevicePositionBack
// or just get the currentPosition from your QBRTCCameraCapture instance
I have a gallery component that uses the current window size to determine how large to make the gallery items. I've also hooked the window resize events so that the gallery items are resized correctly as the window is resized.
In Chrome, if a user then prints the gallery, the items are not being resized to fit the printed page. Instead they are just using the last size calculated for the window size. This is true even when switching from portrait to landscape in the print options.
Is there any way to force react to re-render components when the print dialog is being opened and when the page layout is switched from portrait to landscape? I thought the print dialog would re-render the page with the new dimensions but that doesn't seem to be the case.
When you print a page, the browser takes a snapshot of the current DOM and applies the print media styles. Your problem is the elements on your DOM are dependent on the dimensions of the screen.
Window resize events will help to rearrange your components when the user resizes their screen but they are not triggered when the user prints. There are however ways in which you can listen to an event when the user prints the page.
window.onbeforeprint will trigger when the user prints the page. On event you either resize the screen to make the window resize events trigger or re-render your components some other way. It is not supported in chrome although take a look at this stackoverflow post, it explains how you can use window.matchMedia('print') instead.
It's always best to depend on css media queries rather than on the screen dimensions and resize events, but sometimes that is not always possible.
Use media query to target portrait and landscape print
#media print and (orientation: landscape) {
/* landscape styles */
/* write specific styles for landscape e.g */
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
#media print and (orientation: portrait) {
/* portrait styles */
}
In addition the WitVault's solution, I've created a simple React Component that makes handling complex print.css much easier. Instead of adding classes, IDs, etc. all over your markup and creating a complex print.css file, you can use my react-print library as follows:
https://github.com/captray/react-print
Add this ID to the root (or somewhere high up in your DOM tree) of your current content (but inside in the body tag)
<div id="react-no-print">
Add a div with the id of 'print-mount', or whatever mount ID you'd like to use.
<div id="print-mount"></div>
Create the structure you want for your printable version (which can include child components with their own styles to make things easier.
var PrintTemplate = require('react-print');
var ReactDOM = require('react-dom');
var React = require('react');
var MyTemplate = React.createClass({
render() {
return (
<PrintTemplate>
Your custom HTML or React Components go here, and will replace the existing HTML inside of the "react-no-print" ID, and instead it will render what's inside of your custom template.
</PrintTemplate>
);
}
});
ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount'));
Basically, this renders your printable version, but it's hidden until it's needed for printing. If you need this for a sliding gallery, you probably want to hook into the change event for your slider and re-render (unmount the old one, mount the new one) the print template.
Hope this helps!
You will need to use matchMedia API in your component. But doing it yourself, you will be re-inventing a whole lot of the wheel. It'd be easier to use an existing library which takes care of this. Please check out https://www.npmjs.com/package/react-responsive. It has React based wrapper components over matchMedia, so you should be able to quickly prototype it in your project. There are polyfills available too. One other advantage I can think of is that you can have a print-preview option in your interface where you can let the user preview how the gallery will look in print mode. For this you can use the server rendering feature of this library to simulate print mode.
PS: I am not affiliated with this project in any way.
I have the awesome config like this below:
{ rule = { instance = "plugin-container" },
properties = { floating = false },
callback = awful.titlebar.hide },
I don't want to have my Youtube fullscreen really playing fullscreen, but instead it is playing within the window size. If I want to have fullscreen, I could do with Win+F shortcut.
With the config above it doesn't work. Whenever I click fullscreen, it is really playing fullscreen.
I am used to be an Ion3 user and in Ion3 it just works. I am wondering whether it is possible for Awesome to do like that?
Many thanks.
You can do that on the src attribute of your iframe by adding fs=0 parameter
<iframe w src="//www.youtube.com/embed/video_id?fs=0></iframe>
Parameters doc
I know this is old but found this while asking a similar question just now. Not sure it helps you much since I think you were trying to do the same thing I am (make it a permanent feature by adding something to rc.lua), but if you click YouTube's fullscreen button or have VLC fullscreen itself or whatever and THEN Super+F you will get the effect you want. It will defullscreen into its previous window size but the client still thinks it is in fullscreen mode.
Untested
client.connect_signal("property::fullscreen", function(c) if c.instance == "plugin-container" then c.fullscreen = false end end)
I have a high(er) resolution (500 x 403) "video intro" that a client wants me to add to the beginning of a "main" video they delivered to me. The main video is low res (200 x 150).
I can EITHER makes the intro low res and add it (which the client doesn't like) OR I can double the resolution of the main video and add it (which balloons the bandwidth required to download and play the movie.) Also not optimal as this is destined for mobile.
I have a third solution I am going to use. I am playing the high res "intro video" and when that ends I am automatically loading the main video and playing it right behind the intro by creating a playlist containing the intro and the main video.
The problem I have is the default controller behavior for HTML 5 video is to be visible for the first 2 or 3 seconds of a video and then fade out. This is fine for the first video in the playlist however I would like the control to not show at the beginning of subsequent videos. The intro is only 6 seconds and the appearing and disappearing controls look messy and I would like both videos to appear as one.
I have tried using "videoPlayer.removeAttribute("controls");" however this kills the controls entirely so if a user taps the video later to intentionally bring the controls back up later nothing happens. Ideally I would like to keep all the default behavior with the exception of showing the controls at the beginning of the video.
I have seen some long winded attempts at trying to modify video.js to achieve something of this nature but ideally I can do something to the native features to enable this.
Any ideas?
Original code:
<script type="text/javascript">
$(document).ready(function(){
var xx=1;
var nextVideo = new Array();
nextVideo[0] = "Content/videos/Logo_Animate_537.mp4";
nextVideo[1] = "Content/videos/Main.mp4";
nextVideo[2] = "Content/videos/Logo_Animate_537.mp4";
$("#videoPlayer").bind('ended', function(){
if(xx>nextVideo.length-1){
videoPlayer.setAttribute("controls","controls");
videoPlayer.pause();
xx=1;
} else {
videoPlayer.removeAttribute("controls");
videoPlayer.src = nextVideo[xx];
videoPlayer.play();
xx++;
}
});
//+++++++++++++++++++ This section was added as the solution ++++++++++++++
$("#videoPlayer").on('click touchstart', function () {
videoPlayer.setAttribute("controls","controls");
});
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
});
</script>
<video id="videoPlayer" width="537" height="403" controls poster="images/main.jpg">
<source src="Content/videos/Logo_Animate_537.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
It seems like you have two options here. The first one is to simply remove and replace the controls attribute as you need. This would be the simplest solution, as
element.setAttribute('controls', '')
will simply put the controls back when you need them. The other option is to not use the browser controls at all, define your own custom controls, and hide or show them as you wish.